页面缩放时图片右侧间隙，保留min-width的CSS适配问题求助

原问题 #

我展示了两张图片，分别设置为100vh和50vw，当缩小页面时，图片高度会缩放，但宽度保持不变，右侧出现一大片空白区域。我已为两个元素添加了object-fit:cover属性，想让图片在缩小页面时也能铺满整个屏幕。

相关CSS代码如下：

#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; 
}

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

.the-images img { 
  object-fit: cover; 
  height: 100%; 
  width: 100%; 
}

img { 
  width: 100vw; 
  height: 100vh; 
  object-fit: cover; 
} 

其中item1和item2是div.the-images的子元素。我希望保留min-width属性，因为每个元素尺寸不同。

编辑后的新问题 #

之前的方案解决了原问题，但现在我需要图片宽度为1100px，希望保留min-width:1100px，同时缩小页面时右侧不出现间隙。

原问题修复 #

问题根源在于min-width与50vw的冲突：当视口宽度小于2000px时，两个带min-width:1000px的元素总宽度超过视口，flex容器无法完全包裹，导致右侧空白。按以下修改即可解决：

1. 确保容器占满视口并隐藏溢出内容：

.the-images { 
  display: flex; 
  position: absolute; 
  z-index: 10; 
  inset: 0; /* 替代top/right/bottom/left:0，简化写法 */
  width: 100vw;
  overflow: hidden;
}

2. 让图片容器在不小于最小宽度的前提下自动填充空间：

#item1, #item2 { 
  flex: 1 0 auto; /* 不收缩，不自动增长，基于内容宽度适配 */
  height: 100vh; 
  margin: 0; 
  padding: 0; 
  min-height: 973px; 
  min-width: 1000px; 
}

3. 修正全局图片样式，避免冲突：

img { 
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

新问题适配（宽度1100px，保留min-width） #

要让每个图片容器固定为1100px且保留min-width:1100px，同时避免右侧间隙：

1. 设置图片容器为固定宽度，禁止flex收缩：

#item1, #item2 { 
  flex: 0 0 auto; /* 禁止收缩和增长，保持固定宽度 */
  width: 1100px;
  height: 100vh; 
  margin: 0; 
  padding: 0; 
  min-height: 973px; 
  min-width: 1100px; 
}

2. 容器处理溢出：

.the-images { 
  display: flex; 
  position: absolute; 
  z-index: 10; 
  inset: 0;
  width: 100vw;
  overflow-x: hidden; /* 超出视口部分裁剪，若需滚动查看完整图片则改为auto */
}

这样设置后，当视口宽度小于2200px时，超出部分会被隐藏或允许滚动，不会出现空白间隙，同时保留了min-width的要求。

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