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 img1em 表示 1 xh1字体大小（即 2em ）

Answer 2

用于font-size: 1em;您的h1 img标签。

编辑

哎呀！抱歉，我的意思是说 set height: 1em 但误说是 font-size。

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

我正在使用@miro 演示来获取 img。 演示