JSFiddle - React, Tailwind, and code Playground
HTML
<div class="cont">
<div class="block">
<div class="block__cont"><img src="https://via.placeholder.com/200x140" alt=""></div>
</div>
<div class="block">
<div class="block__cont"><img src="https://via.placeholder.com/150x160" alt=""></div>
</div>
<div class="block">
<div class="block__cont"><img src="https://via.placeholder.com/150x280" alt=""></div>
</div>
<div class="block">
<div class="block__cont"><img src="https://via.placeholder.com/150x140" alt=""></div>
</div>
<div class="block">
<div class="block__cont"><img src="https://via.placeholder.com/200x140" alt=""></div>
</div>
<div class="block">
<div class="block__cont"><img src="https://via.placeholder.com/350x140" alt=""></div>
</div>
<div class="block">
<div class="block__cont"><img src="https://via.placeholder.com/150x250" alt=""></div>
</div>
<div class="block">
<div class="block__cont"><img src="https://via.placeholder.com/150x160" alt=""></div>
</div>
</div>
SCSS
body {
padding: 2rem;
}
$base-width: 500;
.cont {
width: 100%;
border: 2px solid red;
img {
border: 1px solid green;
box-sizing: border-box;
width: 100%;
vertical-align: top;
}
}
@media (min-width: 600px) {
.block {
position: relative;
float: left;
background: #000;
height: 0;
$pb160: percentage(160/$base-width);
$pb140: percentage(140/$base-width);
&:nth-child(1) { width: percentage(200/$base-width); padding-bottom: $pb160; }
&:nth-child(2) { width: percentage(150/$base-width); padding-bottom: $pb160; }
&:nth-child(3) { width: percentage(150/$base-width); padding-bottom: $pb160; }
&:nth-child(4) { width: percentage(150/$base-width); padding-bottom: $pb140; }
&:nth-child(5) { width: percentage(200/$base-width); padding-bottom: $pb140; }
&:nth-child(6) { width: percentage(350/$base-width); padding-bottom: $pb140; }
&:nth-child(7) { width: percentage(150/$base-width); padding-bottom: $pb140; }
&:nth-child(8) {
width: percentage(150/$base-width);
height: auto;
margin: auto;
float: none;
clear: both;
}
}
}