Aspect Ratio — React

---
import AspectRatio from '../components/astro/AspectRatio.astro';
---

<AspectRatio ratio="16/9">
  <img src="/poster.jpg" alt="" />
</AspectRatio>

<!-- Rizzo CSS. Use --aspect-ratio (e.g. 16/9) and --aspect-ratio-padding. -->
<div class="aspect-ratio" style="--aspect-ratio: 16/9;">
  <img src="/poster.jpg" alt="" />
</div>

<script>
  import { AspectRatio } from '$lib/rizzo';
</script>

<AspectRatio ratio={16/9}>
  <img src="/poster.jpg" alt="" />
</AspectRatio>

<script setup>
import AspectRatio from '@/components/rizzo/AspectRatio.vue';
</script>

<template>
  <!-- Set ratio via CSS vars on a wrapper; component provides .aspect-ratio -->
  <div style="--aspect-ratio: 16/9; --aspect-ratio-padding: 56.25%;">
    <AspectRatio>
      <img src="/poster.jpg" alt="" />
    </AspectRatio>
  </div>
</template>

import { AspectRatio } from './components/react';

<AspectRatio ratio={16 / 9}>
  <img src="/poster.jpg" alt="" />
</AspectRatio>