Maximum image size according to parent row-height

Question

Is it possible to use pure CSS to make the built-in size (scale) of the image in accordance with the height of the line of its parent element?

Consider this setting:

HTML:

<p>
  <img src="image.png"/> text text text
</p>

CSS

p {
  line-height: 16px;
}

img {
  display: inline;
  vertical-align: middle;
}

I would like the image to be scaled to a height of 16 pixels, as well as a line-heightparagraph. Is it possible?

Please note: I am open to changes in HTML and CSS, but I am not after a JS solution.

Answer 1

There is no pure HTML / CSS method for this, unfortunately.

Answer 2

this works very well:

img {height: 1em;}