放大时如何强制 CSS 背景图像适合其包含的元素？答案

【问题标题】：How to force CSS background-images to fit to their containing element when zoomed in?放大时如何强制 CSS 背景图像适合其包含的元素？
【发布时间】：2013-04-30 00:43:19
【问题描述】：

我有一个无序列表（垂直显示），它使用背景图像在每个列表项中显示一个图形。

在用户缩放之前它看起来很好。一旦用户缩放，一些列表项的底部（内部）会出现一个微小的间隙。出现间隙是因为 background-image 变得比列表项短，但两者都设置为相同的高度 (44px)。

请参阅此示例。我为每个列表项添加了红色背景，以使差距更容易识别。尝试使用 Google Chrome 放大一次。

http://jsbin.com/okozaz/2/edit

有没有办法消除差距？

我不能使用 background-size:cover 因为背景图像是精灵的一部分。

【问题讨论】：

缩放的实现因浏览器而异。值四舍五入会做出某些有时永远行不通的假设。

标签： css zooming

【解决方案1】：

可能是由于某些值舍入错误，Chrome 在放大时呈现 <li>s 的方式不同，导致有些是 45px 高，有些是 44px。但是，一种解决方法是不在 li 上设置 height 和 line-height ，而是将其留给锚元素。

See jsfiddle

【讨论】：

【解决方案2】：

将高度从 44 像素降低到 43 像素。对我来说，这对你的例子有帮助

【讨论】：