Aspect Ratio Images in CSS

css aspect image html

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