Components / Aspect Ratio
Aspect Ratio
Displays content within a desired ratio.
<AspectRatio ratio={16/9} class="bg-slate-100 rounded-2xl overflow-hidden shadow-sm">
<img
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=800&dpr=2&q=80"
alt="Landscape"
class="object-cover"
/>
</AspectRatio> <div class="relative w-full" style="padding-bottom: 56.25%;">
<div class="absolute inset-0 [&>img]:h-full [&>img]:w-full [&>img]:object-cover">
<img
src="..."
alt="Landscape"
class="object-cover"
/>
</div>
</div>