Fixing Aspect Ratio with CSS (LESS)

It's a common one, but I always forget it.

.aspect-ratio(@ratio) {
  position: relative;
  &:before {
    content: "";
    display: block;
    padding-top: @ratio;
  }
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
}

.aspect-ratio(@width, @height) {
  .aspect-ratio(@height / @width * 100%);
}

.pickup-article-image-box {
  .aspect-ratio(16, 9);

  img {
    // object-fit: contain;  // Aspect Fit
    object-fit: cover;  // Aspect Fill
  }
}

 <div class="pickup-article-image-box">
   <img class="unveil content" data-src="{{ post.image_url }}" />
 </div>