Responsive list of images - html

Question

I need to implement the CSS for the image (attached).
Gallery
I'm retrieving 6 images from third party. I need to display the images so that all 6 images display on the different screen widths. I'm only optimizing for screen widths >= 1024px. So if the screen width is less than 1024px the images are the same size as the images would be at 1024px. 2 of the images have an aspect ratio of 1:1. Two have an aspect ratio of 4:3. Two have an aspect ratio of 16:9.
How would you display the images using CSS so that all of the images show as the screen gets smaller (up to 1024px in width), and maintain the aspect ratio? Basically, how would you implement the CSS to make this row of images responsive?
Right now I have the following structure:
<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>
All of the images need to have the same height while keeping their aspect ratio.
I'm using inline block on the "sample" element. I set a height for all images for each screen width breakpoint (1024, 1280, 1440) and set the width to auto.
so at 1024, I set the height of img to 150px. At 1280, I set the height to 160px. At 1440px, I set the height of img to 166px. I was given advice to set the height to Xvw instead of setting a height for each breakpoint.

Answer 1

I assume you are trying to recreate something similar to your gallery, I thought about using the css display:flex property.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here's the code:
HTML:
<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>
CSS:
.container {
display: flex;
width: 100%;
min-width: 1024px;
}
.article img {
width: 100%;
height: auto;
}
Fiddle:
https://jsfiddle.net/xmqLrtbk/

Answer 2

Set one dimension using percent, and the other auto. example:
img{width:100%;height:auto;}
jsFiddle Demo