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

Question

我有一个与文本内联的图像.那张图片是32x32.我希望将它的自动尺寸设置为它所在的线高,以便它适合.有没有办法做到这一点？

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

Answer 1

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

请参阅此更新的演示(增大或减小字体大小以查看结果.)

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

Answer 2

如果明确设置两者,则可以将高度设置为线高

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

如果您不想设置行高,则需要猜测浏览器默认值(通常取决于字体).这可能是一个很好的猜测:

img { height: 1.12em; }

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

img { vertical-align: bottom; }

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