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

Question

我有一个与文字内联的图像。那张图片是32x32。我希望将自动尺寸设置为其所在的行高，以便它正确匹配。有没有办法做到这一点？

我希望能够将图像放置在具有未知线高的任何位置，并使其尺寸合适。

Answer 1

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

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

Answer 2

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

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

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

img { height: 1.12em; }

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

img { vertical-align: bottom; }

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