当视口发生变化时，很难让一行图像响应式地调整大小

Question

我很难让一行图像随着视口的变化而响应地调整大小。我发现当屏幕变得更窄时，图像开始换行，或者存在尴尬的空白，或者它们不改变大小（导致用户必须水平滚动才能看到图像）。

我承认我是网页设计/开发的新手（也是第一次在 Stack OverFlow 上发帖）。

我的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>

**我的CSS：**

    html, body, .row {
        height: 100%;
        max-height: 100%;
        width: 100%;
    }
    body {
        line-height: 1.75rem !important;
    }
    .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }
    .about-imgs-item {
        height: 240px; 
        width: 245px; 
        display: flex;
        object-fit: cover;
        justify-content: start;
        flex-wrap: nowrap;
    }
      @media (max-width: 575px) {
        .about-imgs-item {
            display: none;
        }
      }

GitHub 代码链接

我尝试过使用以下方法：

• flex-wrap：现在包裹；
• 用 rem 代替 px 来表示图像尺寸
• 用于设置特定于屏幕尺寸的 CSS 的媒体查询
• 取出容器

但是，我会注意到，由于我仍在学习所有这些，我可能没有以正确的方式使用这些元素。谢谢！

Answer 1

您只需将

display:flex;

和

flex-wrap:wrap;

添加到项目容器中

<div class="row about-imgs">

将删除水平滚动

.about-imgs {
  display: flex;
  flex-wrap: wrap;
}