Tamaño máximo de imagen de acuerdo con la altura de línea del padre

Question

¿Es posible con CSS puro hacer un tamaño de imagen en línea (escala) de acuerdo con la altura de línea de su elemento primario?

Considere este set-up:

HTML:

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

CSS:

p { 
    line-height: 16px; 
} 

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

Lo que me gustaría es que la imagen se escala hasta una altura de 16 píxeles, como es el line-height del párrafo. es posible?

tenga en cuenta: Estoy abierto a cambios en el HTML y CSS, pero no estoy buscando una solución JS.

Answer 1

No hay una forma pura de HTML/CSS para hacer esto, lamentablemente.

Answer 2

esto funciona bastante bien:

img {height: 1em;}