Creates a responsive container with a specified aspect ratio.
--aspect-ratio
to define the desired aspect ratio.position: relative
and height: 0
, calculating its height using the calc()
function and the --aspect-ratio
custom property.position: absolute
and filling it parent, while giving it object-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;
}
CSS, Layout
Fits an positions an image appropriately inside its container while preserving its aspect ratio.
CSS, Layout
Creates a responsive image mosaic.
CSS, Layout
Creates a responsive layout with a content area and a sidebar.