Skip to main content

Aspect Ratio

Container that maintains a specific aspect ratio.

Usage​

<w-aspect-ratio ratio="16/9">
  <img src="video-thumbnail.jpg" alt="Video" />
</w-aspect-ratio>

Props​

PropTypeDefaultDescription
ratiostring"1/1"Aspect ratio (width/height)

Common Ratios​

  • 1/1 - Square
  • 4/3 - Standard video
  • 16/9 - Widescreen
  • 21/9 - Ultrawide
  • 2/3 - Portrait photo
  • 3/2 - Landscape photo

Styling​

w-aspect-ratio {
  display: block;
  position: relative;
  width: 100%;
}

w-aspect-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Examples​

Video Container​

<w-aspect-ratio ratio="16/9">
  <iframe src="https://youtube.com/embed/..." allowfullscreen></iframe>
</w-aspect-ratio>

Responsive Image​

<w-aspect-ratio ratio="4/3">
  <img src="photo.jpg" alt="Description" />
</w-aspect-ratio>