绝对定位元素设background-size:cover时，背景图何时停止缩放？

我遇到一个场景：把一张图片设为绝对定位（position:absolute）div的背景，背景用background-size:cover模式。背景图会跟着容器缩放，但到某个容器尺寸后就不再变化了。想请教怎么计算这个背景图停止缩放时的容器尺寸？目前没找到官方文档说明。

相关代码 #

CSS #

.bg { 
  background-image: url("http://www.adweek.com/wp-content/uploads/files/blogs/istock-unfinished-business-hed-2015.jpg"); 
  width:100%; 
  height:100%; 
  background-size:cover; 
  background-repeat: no-repeat; 
  position:absolute; 
}

HTML #

<body> 
  <div class="bg"></div> 
</body>

补充近似数据 #

• 容器高度976时，背景图停止缩放的容器宽度为1540
• 容器高度729时，背景图停止缩放的容器宽度为1147
• 容器高度643时，背景图停止缩放的容器宽度为1010
• 背景图原始尺寸：宽4465，高2827

问题解析与计算方法 #

其实这个现象的核心是理解background-size: cover的底层缩放逻辑，我给你一步步拆解：

首先明确cover的规则：背景图会被缩放至完全覆盖容器区域，同时严格保持自身原始宽高比。缩放时会取容器宽度/图片宽度和容器高度/图片高度这两个比例中的较大值，以此来计算最终的背景图尺寸——这样才能保证至少一个方向完全填满容器，另一个方向超出部分被裁剪。

你观察到的“背景图停止缩放”，本质是缩放比例不再随容器尺寸变化而改变，具体分两种情况：

1. 当容器高度固定时

当你固定容器高度，逐步增加宽度：

• 一开始容器宽高比小于图片宽高比，此时cover会以容器宽度为基准缩放背景图（因为容器宽度/图片宽度是更大的比例），所以背景图会随着容器宽度增加不断放大。
• 当容器宽度增加到「容器高度 × 图片宽高比」时，容器的宽高比刚好和图片一致，此时背景图完全贴合容器，没有裁剪。
• 继续增加宽度，容器宽高比会大于图片宽高比，这时cover会切换为以容器高度为基准缩放（因为容器高度/图片高度变成了更大的比例），这个比例是固定的（因为容器高度不变），所以背景图的尺寸就固定下来了，只是左右超出容器的部分越来越多——看起来就像“停止缩放”了。

2. 当容器宽度固定时

反过来，固定容器宽度逐步增加高度：

• 一开始容器宽高比大于图片宽高比，cover以容器高度为基准缩放，背景图随高度增加放大。
• 当高度增加到「容器宽度 ÷ 图片宽高比」时，容器宽高比和图片一致，背景图完全贴合。
• 继续增加高度，容器宽高比小于图片宽高比，cover切换为以容器宽度为基准缩放，比例固定，背景图尺寸不再变化，上下裁剪部分增多。

具体计算公式

设图片原始宽度为imgW，高度为imgH，先算出图片的宽高比：

ratio = imgW / imgH

• 固定容器高度containerH时，停止缩放的容器宽度：containerH × ratio
• 固定容器宽度containerW时，停止缩放的容器高度：containerW / ratio

用你的数据验证一下：
图片宽高比4465/2827≈1.5794

• 976 × 1.5794 ≈ 1540，和你给出的数值完全匹配
• 729 × 1.5794 ≈ 1151，和你的近似值1147误差很小（因为你提供的是近似数据）
• 643 × 1.5794 ≈ 1015，和你的1010也接近，符合近似值的误差范围

这个结论是基于background-size:cover的官方规范推导出来的，虽然没有直接提到“停止缩放”的临界点，但通过缩放规则就能明确计算出这个阈值。

内容的提问来源于stack exchange，提问作者Arkadiusz Kałkus