有没有一种通过CSS将图像高度设置为行高的方法？

Question

我有一张和文本排列在一起的图片，大小为32x32像素。我想让它能够自适应所在行的行高，以便它能够正确地适应大小。是否有一种方法可以实现这个功能？

我希望能够将这张图片放置在任何行高未知的位置，并且能够自动调整大小以适应布局。

- Justin808

Answer 1

使用 img{height: 1em;} /* 不管你的行高是多少，它都受其字体大小的影响 */

查看此更新的演示（增加或减小字体大小以查看结果）。

- Bhojendra Rauniyar

---

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

9年后有任何更新吗？考虑到@Peter指出的字体大小和行高之间的差异？ - Stephen R

不，只有在你明确设置行高时才会生效。（显然，因为这样行高就是一个已知的值。） - Peter

Answer 2

你可以将高度设置为行高，如果你同时显式设置两者，例如：

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

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

img { height: 1.12em; }

为了使图片适合文本，不会导致实际行高增加，您还需要将其垂直对齐到行框的底部，而不是文本基线（更高的位置）：

img { vertical-align: bottom; }

如果您需要让图片保持在基线上（默认情况），则需要对底部和基线之间的距离进行猜测，并相应地将图像高度设置得较小。在这种情况下，height：1em，或者可能稍微小一些的值，可能是一个不错的猜测。

- Jukka K. Korpela

---

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