3 methods for preserving aspect ratios with CSS
css.aspect-ratio-16\/9 {width: 100%;height: auto;aspect-ratio: 16/9;}.aspect-ratio-16\/9:first-child {position: absolute;top: 0;left: 0;height: 100%;width: 100%;}
Browser compatibilityhtml<div class="aspect-ratio-16/9">...</div>
css[style*='--aspect-ratio'] {position: relative;width: 100%;}[style*='--aspect-ratio']::before {content: '';display: block;padding-bottom: calc(100% / (var(--aspect-ratio, 16/9)));}[style*='--aspect-ratio'] > :first-child {position: absolute;top: 0;left: 0;height: 100%;width: 100%;}
html<!-- Defaults to 16/9 --><div style="--aspect-ratio">...</div><!-- 3/4 --><div style="--aspect-ratio: 3/4">...</div>
The benefits using custom properties like this, is the ability to have infinite amount of aspect ratios throughout your site without having to generate CSS for each one.
Browser compatibilitycss.aspect-ratio-16\/9 {position: relative;display: block;}.aspect-ratio-16\/9::before {content: '';display: block;width: 100%;padding-bottom: calc(100% / (16 / 9));}.aspect-ratio-16\/9:first-child {position: absolute;top: 0;left: 0;height: 100%;width: 100%;}
html<div class="aspect-ratio-16/9">...</div>