我想裁剪成排的图像，当窗口宽度变小时，图像会缩小，而不会一个图像堆积在另一个图像上。我希望图像成对出现在每一行中，并防止它们在窗口裁剪时垂直堆积。
.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;
}
}