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

Question

我有一个与文本内联的图像。该图像是 32x32。我希望将它自动调整为包含它的行高，以便它适合。有没有办法做到这一点？

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

Answer 1

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

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

Answer 2

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

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

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

img { height: 1.12em; }

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

img { vertical-align: bottom; }

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