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

Question

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

31

我有一张图片想要和文字在同一行内显示，但是我需要使它与文本的高度相匹配。我知道可以使用像 <img src="img.jpg" height=16> 或者 <img src="img.jpg" height="100%"> 这样的方法，但前者不随文本大小缩放，而后者似乎将其大小设置为div的大小，而不是文本高度。有谁能帮忙吗？

HTML��例：

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

- rlbond

你愿意使用JavaScript/jQuery吗？ - Alexander Wigmore

3

CSS无法完成这个任务，你需要使用JavaScript。 - Diodeus - James MacFarlane

1

我猜这就是为什么这个问题被标记为 JavaScript 的原因。 - Ghassan Elias

我会使用JavaScript，但不知道是否必需。 - rlbond

尝试将文本用span或其他东西包装起来，然后使用jQuery获取其 $('span').outerHeight(true) 的高度，并进行操作。 - Ghassan Elias

你能否提供一下你正在使用的HTML代码的示例？ - j08691

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Praveen Kumar Purushothaman · Accepted Answer

59

你试过将图像的高度设为1em吗？

img {height: 1em;}

请查看这里的示例代码：http://jsfiddle.net/yAr7z/

- Praveen Kumar Purushothaman

3

非常好用，不过我需要使用0.8em。谢谢！ - rlbond

13

使用 1ex 或类似的单位可以更好地适用于各种字体 - 它将与小写文本的高度相匹配。 - Beni Cherniavsky-Paskin

谢谢@BeniCherniavsky-Paskin。 - Praveen Kumar Purushothaman

3

非常好用，谢谢！这里是内联标签：<img [...] style="height:1ex;" />。 - Oliver Zendel