如何使用 CSS 更改 <i> 标签中图像的高度和宽度？
Posted
技术标签:
【中文标题】如何使用 CSS 更改 <i> 标签中图像的高度和宽度？【英文标题】：How do I change the height and width of an image in an <i> tag using CSS? 【发布时间】：2020-07-03 01:09:54 【问题描述】：我想更改<i> 标记中标志的高度和宽度。
旗帜的图像显示正常。
但是，我想调整它们的大小，因为它们很小，无法正常工作。
非常感谢任何帮助。
这个例子来自：https://mdbootstrap.com/docs/jquery/content/flag/
<!DOCTYPE html>
<html>
<head>
<link href="flag.min.css" rel="stylesheet">
<style>
i
width: 150px;
height: 100px;
#flag
height: 150px;
width: 100px;
</style>
</head>
<body>
<div id="flag">
<i class="ae flag"></i>
</div>
<i class="france flag"></i>
<i class="myanmar flag"></i>
</body>
</html>
【问题讨论】：
标志是图标字体吗？ 你不能这样做，因为所有的标志都是从这里裁剪的mdbootstrap.com/img/svg/flags.png 我不确定。font-size这个属性我试过了，还是一样。
@mrkn0007 你可以用这个phoca.cz/cssflags/#examples
CSS可以让它变大transform: scale(2);，但是会变得模糊。
【参考方案1】：
感谢所有做出贡献并帮助我学到很多东西的人。
根据乐于助人的社区提供的所有信息，以下解决方案最适合我：
CSS：
.a1
border-radius: 5px;
width: 120px;
height: 90px;
.b1
border-radius: 4px;
width: 32px;
height: 24px;
HTML：
<img class="a1" src="https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg">
<img class="b1" src="https://lipis.github.io/flag-icon-css/flags/4x3/pk.svg">
因为它是我引用的 SVG，所以我可以轻松地放大它，而不必担心模糊或像素。
再次感谢所有提供帮助的人。
【讨论】：
【参考方案2】：您无法调整 Mdbootstrap 图标的大小。我看到了您提供的链接；您应该阅读此页面上的类型部分，他们提到您无法调整图标的大小。
解决方案是您必须使用标志图像并提供带有锚标记的图像链接。`
<a href="#">
<img src="image.jpeg" />
</a>【讨论】：
感谢您的帮助。我阅读了规范，但我只是想知道是否有任何其他方式来扩大标志。我已经找到了解决方案并将其发布为答案。以上是关于如何使用 CSS 更改 <i> 标签中图像的高度和宽度？的主要内容，如果未能解决你的问题，请参考以下文章