Aspect ratio

css
[style*='--aspect-ratio'] > :first-child {
height: auto;
width: 100%;
}
@supports (--custom: property) {
[style*='--aspect-ratio'] {
position: relative;
width: 100%;
background-color: var(--color-gray-100);
}
[style*='--aspect-ratio']::before {
content: '';
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*='--aspect-ratio'] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
}
html
<div style="--aspect-ratio: 16/9;">
<img src="..." />
</div>