<div class="demo">
<h2>Maintain Aspect Ratio #2</h2>
<div class="grid">
<div class="wrapper">
<img class="img" src="http://via.placeholder.com/795x745">
</div>
<div class="wrapper">
<img class="img" src="http://via.placeholder.com/985x357">
</div>
<div class="wrapper">
<img class="img" src="http://via.placeholder.com/606x255">
</div>
<div class="wrapper">
<img class="img" src="http://via.placeholder.com/697x418">
</div>
</div>
</div>
.grid {
display: flex;
flex-wrap: wrap;
}
.demo {
width: 80%;
margin: auto;
}
.img {
object-fit: cover;
width: 320px;
height: 180px;
background: red;
margin: 2px;
&:nth-child(even) {
object-fit: contain;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.