Aspect ratio
Creates a responsive container with a specified aspect ratio.
- Use a CSS custom property,
--aspect-ratio
to define the desired aspect ratio. - Set the container element to
position: relative
andheight: 0
, calculating its height using thecalc()
function and the--aspect-ratio
custom property. - Set the direct child of the container element to
position: absolute
and filling it parent, while giving itobject-fit: cover
to maintain the aspect ratio.
<div class="container"> <img src="https://picsum.photos/id/119/800/450" /> </div>
.container { --aspect-ratio: 16/9; position: relative; height: 0; padding-bottom: calc(100% / (var(--aspect-ratio))); } .container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }