Aspect Ratio

Displays content within a desired ratio.

Examples

16:9 Ratio

Photo by Drew Beamer

vue

<AspectRatio :ratio="16 / 9" class="bg-muted">
  <img
    src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
    alt="Photo by Drew Beamer"
    class="h-full w-full rounded-md object-cover"
  />
</AspectRatio>