Aspect Ratio Images in CSS

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%;
  }
}