27

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

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

4

2 回答 2

34

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

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

于 2013-04-11T05:28:41.453 回答
10

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

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

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

img { height: 1.12em; }

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

img { vertical-align: bottom; }

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

于 2013-04-11T04:33:09.930 回答