html - レスポンシブ画像を強制的に親要素の高さと一致させますか?

Question

私には2つの要素があります。1 つは H1 タグで、もう 1 つは IMG タグです。以下の 2 つの要素の CSS があるとします。

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

HTML

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

img 要素に高さを継承させ、フォントサイズに基づいてサイズを変更するにはどうすればよいですか?

ありがとうございました！

score 1 · Accepted Answer

高さを 1em に設定すると、フォントサイズが高さとして使用されます。

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

em メジャーは親要素のフォントサイズに相対的であることに注意してください。したがってh1 img、1em では 1 xh1フォントサイズ (つまり 2em ) を意味します。

score 0 · Accepted Answer

Use font-size: 1em; to your h1 img tag.

Edit

Ooops! Sorry, I mean to say that set height: 1em but mistakenly said to font-size.

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

I'm taking @miro demo to take the img. demo

2 に答える 2