如何实现横向滚动图片容器，让首张图片完整显示并滑动展示下一张？

问题原因 #

你的代码里有两个关键问题导致图片显示不全：

• .carousel 设置了 justify-content: center，flex容器会把内部两张图片往中间挤压，导致每张都只能显示一部分。
• 图片同时混用 width: 85vw 和 min-width: 100% 两种尺寸规则，加上容器的居中属性，进一步打乱了布局逻辑。

修复方案 #

调整以下几点即可让每张图片完整占满容器，滚动切换：

• 移除 .carousel 的 justify-content: center，让图片默认靠左对齐，第一张完整显示在容器视口内。
• 统一图片尺寸单位，让图片宽度完全匹配容器宽度，高度填满容器高度。
• 可选：添加滚动吸附属性，让滚动时自动对齐到单张图片，提升操作体验。

修改后的完整代码 #

CSS

.carousel {
  height: 74%;
  width: 85%;
  margin-left: 7.5%;
  margin-top: 0.5%;
  display: flex;
  align-items: center;
  /* 移除导致图片居中挤压的属性 */
  overflow-x: scroll;
  overflow-y: hidden;
  /* 可选：滚动时自动对齐图片 */
  scroll-snap-type: x mandatory;
}

.carousel img {
  /* 图片宽度完全匹配容器，高度填满容器 */
  width: 100%;
  height: 100%;
  /* 保持图片比例，避免拉伸变形 */
  object-fit: cover;
  /* 配合滚动吸附，让图片对齐容器视口 */
  scroll-snap-align: start;
}

HTML

<div class="carousel">
  <img src="https://via.placeholder.com/600x400">
  <img src="https://via.placeholder.com/600x400/dddddd">
</div>

补充说明 #

• scroll-snap-type 和 scroll-snap-align 是现代浏览器原生支持的属性，能让滚动动作结束后自动停在单张图片的位置，无需手动调整滚动条。
• 如果需要完整显示图片而非填满容器，可以将 object-fit: cover 替换为 object-fit: contain。

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