Skip to content

Home

Aspect ratio

Creates a responsive container with a specified 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;
}

More like this

Start typing a keyphrase to see matching snippets.