Skip to main content

Aspect Ratio

After finished supporting IE11, we can use aspect-ratio property.

The following 2 images are square images and cropped 16/4 ratio. it looks same, but it's implemented different approach.

Before

After

<div class="c-before">
    <img src="(...)" class="c-before__image">
</div>
.c-before {
    position: relative;
    padding-top: 56.25%;
}
.c-before__image {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}