Image max size according to parent's line-height

Question

Is it possible with pure CSS to make an inline image size (scale) according to the line-height of its parent?

Consider this set-up:

HTML:

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

CSS:

p {
  line-height: 16px;
}

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

What I would like is that the image gets scaled to a height of 16px, as is the line-height of the paragraph. Is this possible?

please note: I'm open to changes in the HTML and CSS, but I'm not after a JS solution.

Answer 1

this works pretty well:

img {height: 1em;}

Answer 2

There's no pure HTML/CSS way to do this, sadly.