CODEWITHSUNDEEP
htmlcssimage
Aaron Brewer
Aaron Brewer

Reputation: 3667

Force Responsive Images to match Parent Element Height?

I have two elements. One is an H1 tag and the other is an IMG tag. If I have the CSS for the two elements below:

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

HTML

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

How can I have the img element inherit the height and resize based on the font-size?

Thank you!

Upvotes: 0

Views: 592

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

Upvotes: 0

Dom Day
Dom Day

Reputation: 2562

If you set the height to 1em, it will use the font size as the height.

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

note that the em measure is relative to the font size of the parent element, therefore h1 img at 1em is saying 1 x h1 font size ( which is 2em )

Upvotes: 1

Related Questions