有没有办法通过 CSS 将图像高度设置为行高？答案

【问题标题】：Is there a way via CSS to set the image height to the line-height?有没有办法通过 CSS 将图像高度设置为行高？
【发布时间】：2020-06-03 01:38:11
【问题描述】：

我有一张内嵌文字的图片。该图像是 32x32。我希望将它 auto size 设置为它所在位置的行高，以便它适合。有没有办法做到这一点？

我希望能够将图像放置在具有未知行高的任何位置并正确调整大小。

【问题讨论】：

标签： css

【解决方案1】：

使用img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*

查看此Updated Demo（增大或减小字体大小以查看结果。）

【讨论】：

这个答案不正确。 1em 是 FONT 大小，而不是 LINE 高度。对于相同的字体大小，不同的字体具有不同的行高！例如，对于 12pt Times New Roman（默认字体），1em 等于 16px，而行高为 18.5px。然而，对于 12pt Verdana，1em 也等于 16px，但行高为 19.5px。

【解决方案2】：

如果您明确设置两者，您可以将高度设置为行高，例如

* { line-height: 1.3; }
img { height: 1.3em; }

如果您不想设置行高，则需要猜测浏览器的默认设置（通常取决于字体）。这可能是一个不错的猜测：

img { height: 1.12em; }

要使图像正确适合文本，从而不会导致实际行高增加，您还需要将其垂直对齐到行框的底部，而不是文本基线（更高):

img { vertical-align: bottom; }

如果您需要让图像位于基线（默认）上，您需要猜测底部与基线之间的距离，并将图像高度相应地设置为较小。在这种情况下，height: 1em，或者可能具有更小的值，可能是一个不错的猜测。

【讨论】：

Jukka 的第一个示例（设置行高）是将图像高度始终设置为行高的唯一方法。另请注意，字体大小和行高之间的关系不仅因字体而异，而且在相应字体的操作系统之间也可能不同。因此，即使它适合您的计算机，也可能不适合其他人的计算机。