如何让切片背景图实现与background-image: cover一致的效果？

你当前的核心问题是：每个20px宽的切片单独使用background-size: cover时，会基于自身小容器的尺寸缩放图片，而整体容器的cover是基于100px×100px的容器计算缩放，两者的缩放逻辑完全不同，所以效果无法匹配。要让切片和整体效果一致，需要先模拟出整体cover的缩放与定位逻辑，再给每个切片设置对应的参数。

解决方案代码 #

修改后的CSS可以完美匹配整体cover的效果：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.slice-container {
  height: 100px;
  width: 100px;
  display: flex;
}

.slices {
  height: 100px;
  width: 20px;
  background-repeat: no-repeat;
  /* 对应整体cover后的图片尺寸：原图片宽高比≈1.5:1，缩放后高度填满100px容器，宽度为150px */
  background-size: 150px 100px;
  background-image: url("https://images.unsplash.com/photo-1602431039221-64c1be92ad52?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGZha2V8ZW58MHx8MHx8fDA%3D");
}

.slices-1 {
  /* 整体cover时图片水平居中，左偏移量为-(150-100)/2 = -25px */
  background-position: -25px 0;
}

.slices-2 {
  background-position: -45px 0;
}

.slices-3 {
  background-position: -65px 0;
}

.slices-4 {
  background-position: -85px 0;
}

.slices-5 {
  background-position: -105px 0;
}

.cover-container {
  height: 100px;
  width: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("https://images.unsplash.com/photo-1602431039221-64c1be92ad52?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGZha2V8ZW58MHx8MHx8fDA%3D");
}

HTML部分保持不变：

<!-- Displaying image slices -->
<div class="slice-container">
  <div class="slices slices-1"></div>
  <div class="slices slices-2"></div>
  <div class="slices slices-3"></div>
  <div class="slices slices-4"></div>
  <div class="slices slices-5"></div>
</div>

<br />

<!-- Full container background -->
<div class="cover-container"></div>

逻辑说明 #

1. 整体cover的缩放计算：原图片宽高比≈1.5:1（宽500px，高≈333px），在100px×100px容器中使用cover时，图片会被缩放至高度100px，宽度150px（优先填满容器高度，宽度按比例放大），然后水平居中，因此图片左边缘相对于容器左边缘偏移了-(150-100)/2 = -25px。
2. 切片的定位逻辑：每个切片需要显示这个150px宽的缩放后图片的对应20px区域，因此依次调整background-position的水平值，确保切片拼接后完全还原整体cover的显示效果。
3. 适配不同比例图片：如果是竖版图片（宽高比<1），则cover会缩放至宽度100px、高度大于100px，此时需要调整垂直方向的background-position，逻辑同理。

内容的提问来源于stack exchange，提问作者sheng