我有一张和文本排列在一起的图片,大小为32x32像素。我想让它能够自适应所在行的行高,以便它能够正确地适应大小。是否有一种方法可以实现这个功能?
我希望能够将这张图片放置在任何行高未知的位置,并且能够自动调整大小以适应布局。
我有一张和文本排列在一起的图片,大小为32x32像素。我想让它能够自适应所在行的行高,以便它能够正确地适应大小。是否有一种方法可以实现这个功能?
我希望能够将这张图片放置在任何行高未知的位置,并且能够自动调整大小以适应布局。
使用 img{height: 1em;} /* 不管你的行高是多少,它都受其字体大小的影响 */
查看此更新的演示(增加或减小字体大小以查看结果)。
* { line-height: 1.3; }
img { height: 1.3em; }
如果您不想设置行高,那么您需要猜测浏览器默认值(通常取决于字体)。这可能是一个好的猜测:
img { height: 1.12em; }
为了使图片适合文本,不会导致实际行高增加,您还需要将其垂直对齐到行框的底部,而不是文本基线(更高的位置):img { vertical-align: bottom; }
如果您需要让图片保持在基线上(默认情况),则需要对底部和基线之间的距离进行猜测,并相应地将图像高度设置得较小。在这种情况下,height:1em
,或者可能稍微小一些的值,可能是一个不错的猜测。