如何使图像行在 div 内缩放答案

【问题标题】：How can I make images rows scale inside div如何使图像行在 div 内缩放
【发布时间】：2021-03-24 07:25:48
【问题描述】：

我想裁剪成行的图像，当窗口宽度变小时，图像会缩小，而不会将一个图像堆积在另一个图像之上。我希望图像成对出现在每一行中，并防止它们在窗口裁剪时垂直堆积。

.row {
  text-align: center;
  margin: 40px;
}
.container img {
  margin-left: 20px;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
  <div class="row">
    
      <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"></img>
        <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"></img>
  </div>
  <div class="row">
    <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"></img>
      <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"></img>
  </div>
</div>
</body>



</html>

before the window width scale down, images are big

after browser width gets smaller, images stay in pairs in horizontal rows and scale down proportionally.

【问题讨论】：

你在使用引导程序吗？
不，我不想使用它
尝试添加 display: flex;如果您不使用引导程序，则转到 .row 类。

标签： html css

【解决方案1】：

尝试在您的 style.css 文件中替换以下代码。

.row {
  text-align: center;
  margin: 40px;
}
.container img {
  margin-left: 20px;
}

@media screen and (max-width: 558px) {
  .row {
    display: flex;
    margin: 0;
  }
  .container img {
    margin: 10px;
    width: 42vw;
  }
}

【讨论】：