自动缩放图像以匹配文本高度答案

【问题标题】：Automatically scale an image to match text height自动缩放图像以匹配文本高度
【发布时间】：2012-08-30 10:03:29
【问题描述】：

我有一个图像，我想将它与一些文本内联使用，但我需要它来匹配文本高度。我知道有可能像<img src="img.jpg" height=16> 甚至<img src="img.jpg" height="100%"> 这样的东西，但前者不随文本大小缩放，而后者似乎使它成为 div 的大小，而不是文本高度。有人可以帮忙吗？

示例 HTML：

<body>
This is a test <img src="img.jpg">
</body>

【问题讨论】：

你愿意使用javascript/jQuery吗？
CSS 无法为您做到这一点。您需要使用 JavaScript。
:D 我想这就是为什么这个问题被标记为 JavaScript
我可以使用javascript，我不知道是否需要。
尝试用 span 或其他东西包裹文本，然后用它的 (jquery) 获取 $('span').outerHeight(true) 并做这个伎俩。

标签： javascript html css image

【解决方案1】：

您是否尝试过将图像高度设为 1em？

img {height: 1em;}

在这里查看小提琴：http://jsfiddle.net/yAr7z/

【讨论】：

效果很好，虽然我需要使用 0.8em。谢谢！
1ex 或类似的字体应该更好地适应各种字体 - 它会匹配小写文本的 height。
谢谢@BeniCherniavsky-Paskin。
效果很好，谢谢！这是内联标签：