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

Question

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

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

HTML

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

如何让img元素继承高度并根据font-size调整大小？

谢谢！

Answer 1

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

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

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

Answer 2

将font-size: 1em;用于h1 img标记。

修改

哎呀！对不起，我的意思是说设置高度：1em但错误地说是字体大小。

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

我正在使用@miro演示来接受img。 demo