根据父级行高的图像最大大小

Question

是否可以使用纯CSS根据其父级的行高来制作内嵌图像大小(比例)？

考虑一下这个设置:

HTML:

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

CSS:

p {
  line-height: 16px;
}

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

我想要的是图像缩放到16px的高度,就像line-height段落一样.这可能吗？

请注意:我对HTML和CSS的更改持开放态度,但我不是在使用JS解决方案.

Answer 1

这非常有效:

img {height: 1em;}

Answer 2

遗憾的是，没有纯 HTML/CSS 方法可以做到这一点。