如何在div中缩放图像行

OneKe 发表于 Dev

OneKe

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

.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>

在缩小窗口宽度之前，图像很大

浏览器宽度变小后，图像会成对成水平行并按比例缩小。

奈杰尔·德克鲁兹

尝试在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;
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。