如何让图片行随viewport响应式缩放，无换行、留白与横向滚动？

直接给你调整后的代码和关键说明，实现不换行、无间隙、铺满屏幕宽度的响应式图片行：

调整后的CSS代码 #

html, body {
  height: 100%;
  max-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  line-height: 1.75rem !important;
}
.container-fluid {
  padding: 0 !important;
  margin: 0 !important;
}
/* 父容器设置flex布局，强制不换行，子项均分宽度 */
.about-imgs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0; /* 消除图片间间隙 */
  width: 100%;
  height: 240px; /* 固定整体高度，可根据需求调整 */
}
/* 子项去掉固定宽高，设置flex:1让它自动占满可用空间 */
.about-imgs-item {
  flex: 1;
  height: 100%;
}
/* 图片铺满容器，保持比例裁剪 */
.about-imgs-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 575px) {
  .about-imgs-item {
      display: none;
  }
}

调整后的HTML代码（结构不变，确保图片路径正确） #

<div class="container-fluid dev">
    <div class="row about-imgs">
        <div class="about-imgs-item">
            <img id="about-imgs-1" src="image1.jpg">
        </div>
        <div class="about-imgs-item">
            <img id="about-imgs-2" src="image2.jpg">
        </div>
        <div class="about-imgs-item">
            <img id="about-imgs-3" src="image3.jpg">
        </div>
        <div class="about-imgs-item">
            <img id="about-imgs-4" src="image4.jpg">
        </div>
        <div class="about-imgs-item">
            <img id="about-imgs-5" src="image5.jpg">
        </div>
    </div>
</div>

关键调整点说明 #

1. 父容器.about-imgs：必须设置display: flex和flex-wrap: nowrap，同时用gap:0消除默认间隙，固定整体高度保证图片行统一高度。
2. 子项.about-imgs-item：去掉固定宽高，用flex:1让每个子项自动均分父容器的宽度，实现随屏幕缩放。
3. 图片设置：给图片加width:100%和height:100%，配合object-fit:cover保证图片铺满容器且比例不变，不会拉伸变形。

为什么之前的方法没生效？ #

• 你把flex-wrap: nowrap加在了子项上，应该加在父容器.about-imgs才起作用；
• 给子项设置了固定宽高，屏幕变窄时子项无法收缩，要么换行要么溢出；
• 图片没有设置自适应规则，无法跟随容器缩放。

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