设置min/max width后object-fit:cover失效的图片布局问题求助

问题描述 #

两张图片设置为100vh高度、50vw宽度，添加object-fit:cover后原本显示正常，但当某张图片尺寸小于特定值时，另一张会被撑大。尝试给图片加min-width:1000px和max-width:1100px后，object-fit:cover失效，页面缩放右侧出现空白。部分图片宽度不足1000px，显示时右侧也会空白，是否必须更换宽度大于1000px的图片？

现有代码 #

#item1 { 
  width:50vw; 
  height:100vh; 
  margin: 0; 
  padding: 0; 
  min-height: 973px; 
  min-width: 1000px; 
  object-fit: cover; 
}

#item2 { 
  width:50vw; 
  height:100vh; 
  margin: 0; 
  padding: 0; 
  min-height: 973px; 
  min-width: 1000px; 
  object-fit: cover; 
}

#item1, #item2 {
  filter: brightness(50%);
}

.the-images { 
  display: flex; 
  position: absolute; 
  z-index: 10; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
} 

解决方案 #

不用换图，调整布局设置就能解决问题：

• 给.the-images添加overflow: hidden：图片超出容器宽度时会被裁剪，不会出现右侧空白
• 删除图片的min-width:1000px和max-width:1100px：这两个属性会强制图片脱离50vw的宽度约束，直接导致object-fit:cover失效。保留width:50vw和height:100vh，object-fit就能正常工作，自动裁剪图片填满容器，不会撑大其他元素
• 无需担心小尺寸图片拉伸：object-fit:cover本身会保持图片比例，只裁剪多余部分，不会拉伸变形

调整后的CSS示例：

#item1, #item2 { 
  width: 50vw; 
  height: 100vh; 
  margin: 0; 
  padding: 0; 
  min-height: 973px; 
  object-fit: cover; 
  filter: brightness(50%);
}

.the-images { 
  display: flex; 
  position: absolute; 
  z-index: 10; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  overflow: hidden; /* 新增：隐藏溢出内容 */
} 

问题根源：min-width:1000px让图片宽度优先取固定值，当50vw小于1000px时，图片会撑破容器宽度，导致页面右侧空白；同时图片尺寸脱离容器约束，object-fit失去作用。移除限制后，图片按容器宽度填充，object-fit正常裁剪，容器的overflow:hidden解决空白问题。

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