Set aspect ratio on any element with the native aspect-ratio property. No wrapper divs.
/* 16:9 video container */
.video-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
}
/* Square */
.square {
aspect-ratio: 1;
}
/* Optional fallback for old browsers */
@supports not (aspect-ratio: 1) {
.video-wrapper::before {
content: '';
float: left;
padding-top: 56.25%; /* 9/16 */
}
}Set aspect-ratio on the element that should keep proportions. Often combined with width: 100% or a fixed dimension.
16/9 for video, 1 for square, 4/3 or 3/2 for images. No wrapper div needed.