How to set image size same as container font-size

Question

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.

Answer 1

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>