使用CSS调整内嵌图像的大小

Question

我写技术文档。有时我需要在我的说明中包含GUI图标的内嵌图像。内嵌图像通常是图标的屏幕截图。有时，屏幕截图比周围文本大得多，如下图所示。它看起来很糟糕，这让我感到难过。

是否有CSS规则组合以确保内嵌图像与其周围文本的大小相同？

Answer 1

你要找的是CSS单位“em”，其中1 em代表当前字体大小的1倍。表示您可以将img-Tag的max-width / max-height设置为1em。使用vertical-align: middle水平居中图像。

h1 img,
h3 img {
  max-width: 1em;
  max-height: 1em;
  vertical-align: middle;
}

<h1>
    Big header (<img src="https://image.freepik.com/free-icon/male-user-silhouette_318-35708.jpg">)
</h1>
<h3>
    Small header (<img src="https://image.freepik.com/free-icon/male-user-silhouette_318-35708.jpg">)
</h3>

这是一个你可以搞砸的JSFiddle：https://jsfiddle.net/qvd56t62/6