html - 如何设置与容器字体大小相同的图像大小

Question

我有这个 html 代码:

<p>text <span class="icon svgicon"><img src="img.svg" /></span></p>
<p>text <span class="icon svgicon"><svg>...</svg></span></p>

假设段落和跨度的字体大小为 16px。是否可以使用 CSS 使图像具有相同的高度(16px)？

我想以某种方式使图像从跨度的字体大小继承高度，因此我不需要为我放置它的每个地方自定义它。

这应该是一些svgicons。

最后的办法是让一个 JS 解析所有图标看到持有人的字体大小并设置高度。

谢谢。

Answer 1

我相信您可以通过设置相对于字体高度的图像高度并将图像宽度设置为 auto 来完成它，如下所示:

.svgicon img, .svgicon svg {
  height: 1em;
  width: auto;
}

p, span {
  font-size: 16px;
}

<p>text <span class="icon svgicon"><img class="custom" src="img.jpeg" /></span></p>
<p>text <span class="icon svgicon"><svg>...</svg></span></p>