html - 强制响应图像匹配父元素高度？

Question

我有两个元素。一个是 H1 标签，另一个是 IMG 标签。如果我有以下两个元素的 CSS:

h1 {
     font-size: 2em;
}
h1 img {
     max-width: 100%;
     height: auto;
}

HTML

<h1><img src="icon.png" /> Heading</h1>

如何让 img 元素继承高度并根据字体大小调整大小？

谢谢!

Answer 1

如果将高度设置为 1em，它将使用字体大小作为高度。

h1 img {
    height: 1em;
    vertical-align: middle;
}

请注意，em 度量是相对于父元素的字体大小的，因此 h1 img 在 1em 表示 1 x h1 字体大小(即 2em )