Html 图像响应列表

我需要实现图像的CSS（附件）。

我正在从第三方检索6张图像。我需要显示的图像，使所有6个图像显示在不同的屏幕宽度。我只优化屏幕宽度>=1024px。因此，如果屏幕宽度小于1024px，则图像大小与1024px的图像大小相同。其中2幅图像的纵横比为1:1。其中两个的纵横比为4:3。其中两个的纵横比为16:9

如何使用CSS显示图像，以便在屏幕变小时显示所有图像（宽度高达1024倍），并保持纵横比？基本上，您将如何实现CSS以使这一行图像响应

现在我有以下结构：

<article class="sample">
 <img src ="ex1.jpg" />
</article>
<article class="sample">
 <img src ="ex2.jpg" />
</article>
<article class="sample">
 <img src ="ex3.jpg" />
</article>
<article class="sample">
 <img src ="ex4.jpg" />
</article>

所有图像都需要具有相同的高度，同时保持其纵横比

我在“sample”元素上使用内联块。我为每个屏幕宽度断点（1024、1280、1440）设置了所有图像的高度，并将宽度设置为自动

---

所以在1024，我将img的高度设置为150px。在1280，我将高度设置为160px。在1440px时，我将img的高度设置为166px。有人建议我将高度设置为Xvw，而不是为每个断点设置高度。

使用百分比设置一个维度，另一个

自动设置。例如：

img{宽度：100%；高度：自动；}

我假设您正在尝试重新创建类似于图库的内容，我考虑过使用css display:flex属性


代码如下：

HTML:

小提琴：

我需要图像的高度相同。如何保持每个图像的高度相同，同时仍保持纵横比此提琴使用相同高度但不同纵横比的图像，只需打开任何图像编辑器程序并将所有图像的高度更改为标准，例如500px，保持纵横比锁定。问题是图像的高度不同。另外，是否可以通过计算图像的纵横比来计算flex grow值？
<div class="container">
   <div class="article" style="flex-grow: 1.77">
     <img src="http://www.lorempixel.com/177/100" alt="">
   </div>
   <div class="article" style="flex-grow: 1">
     <img src="http://www.lorempixel.com/100/100" alt="">
   </div>
   <div class="article" style="flex-grow: 1.33">
     <img src="http://www.lorempixel.com/133/100" alt="">
   </div>
   <div class="article" style="flex-grow: 1" >
     <img src="http://www.lorempixel.com/100/100" alt="">
   </div>
   <div class="article" style="flex-grow: 1.77" >
     <img src="http://www.lorempixel.com/177/100" alt="">
   </div>
   <div class="article" style="flex-grow: 1.33">
     <img src="http://www.lorempixel.com/133/100" alt="">
   </div>
</div>

.container {
  display: flex;
  width: 100%;
  min-width: 1024px;
}

.article img {
  width: 100%;
  height: auto;
}