CODEWITHSUNDEEP
htmlcsssvg
Emanuel
Emanuel

Reputation: 373

How to set image size same as container font-size

I have this html code:

<p>text <span class="icon svgicon"><img src="img.svg" /></span></p>
<p>text <span class="icon svgicon"><svg>...</svg></span></p>

Lets say the paragraph and the span have the font-size 16px. Is it possible to make the image have the same height ( 16px ) using CSS?

I want to make somehow to image inherit the height from the span's font-size so i wont need to customize it for every place where i put it.

This are supposed to be some svgicons.

Last resort would be to make a JS to parse all icons see the holder font-size and set the height.

Thanks.

Upvotes: 8

Views: 3005

Answers (2)

Andrew Errico
Andrew Errico

Reputation: 45

You can give the image a height of 1em which will be relative to the parent font-size.

.icon {
  font-size: 16px;
}

.icon > img,
.icon > svg {
  height: 1em;
}

Upvotes: 2

Andrew Allison
Andrew Allison

Reputation: 1146

I believe you accomplish it by setting image height relative to the font height and setting the image width to auto like so:

.svgicon img, .svgicon svg {
  height: 1em;
  width: auto;
}

p, span {
  font-size: 16px;
}
<p>text <span class="icon svgicon"><img class="custom" src="img.jpeg" /></span></p>
<p>text <span class="icon svgicon"><svg>...</svg></span></p>

Upvotes: 9

Related Questions