You want your HTML structure to be like this:
<div class="aspect a32">
<img src="some_image.png" />
</div>
You can then force an aspect ratio like this:
.aspect {
position: relative;
&::before {
content: "";
display: block;
}
&.a31::before {
padding-top: 33.33%;
}
&.a32::before {
padding-top: 66.67%;
}
&.a43::before {
padding-top: 75%;
}
img {
height: 100%;
object-fit: cover;
object-position: center;
top: 0;
left: 0;
position: absolute;
width: 100%;
}
}
Reference
No known
History May 16, 2019