Question

我有一张代表我的电子邮件地址的图片。我希望这个图像的高度与字体高度或行高相同。所以我尝试了这个：

img.address { height: 1em; width: auto }

<p>My e-mail address is <img class="address" height="15" width="149" src="address.png" alt="[]" />.</p>

它似乎适用于台式机上的Chrome，但智能手机上的Chrome图像比字体小得多。我不明白为什么？对此有任何补救措施吗？

注意：由于此方法适用于桌面浏览器，因此问题可以改为：为什么在智能手机浏览器中字体的高度不是1em，如何获得字体的高度吗

编辑：我在图片周围添加了一些命令，将其放入上下文中。

Answer 1

网页的默认字体大小为16px（reference），不再对文档应用设置。您没有为您的html或正文或段落设置任何字体大小，所以：

浏览器默认使用font-size（16px）渲染图像，因为那里没有更多设置来控制图像大小。
网页文本可能不会使用默认的16px进行许多其他覆盖设置，以及Android初始设置，辅助功能选项，移动友好标准以呈现文本等。

因此，您必须为整个文档定义所需的字体大小，然后文本和图像高度将具有相同的参考。

最后，如果您不想设置初始字体大小，则javascript技巧是计算渲染线的高度并将其设置为图像高度。例如，我建议从文本中提取第一个单词并将其放入临时div中，并在计算该div的高度后，将其设置为图像高度：

var myhtml=$('#imageId').parent().text();
var mywords=myhtml.split(" ");
var fisrtWord=mywords[0];
$(body).append('<div id="tempdiv">' + firstword + '</div>');
$('#imageId').height($('#tempdiv').heigh());
$('#tempdiv').remove();

最后注意：线条的高度比字符高度高约1.5倍。因此，您可以将计算高度减少1.5，以获得更好的结果。

Answer 2

实际上，手机上的图像太小了。另外，1em是应该是字体高度。这就是真正解决这个问题的原因神秘。

嗯，不是真的。 font-size: 16px;不等于height: 16px;。 line-height: 16px;也不会，它实际上“只是”在字符的顶部和底部添加空格。 font-size实际上是字母表中最宽字符的宽度（我认为它实际上是测量字母M）。所以你要做的事情是行不通的。然后有一个事实是你必须在没有空格的情况下剪切完全的图像，这意味着那里可能存在错误源。您必须尝试通过度量手动设置高度并在不同的视口中进行比较。如果你给我一些关于你试图用屏幕做什么的提示，我可能会给你一个其他的解决方案。您是否有理由将图像用于电子邮件而不是常规HTML？

内嵌图像高度等于字体高度

2 个答案: