फ़ीचर्डनया
इमेजCaptioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 फ्रेमवर्कशुरुआती
Loading…
A fixed-ratio image frame - square, 16:9 or portrait - that holds its space as it loads.
<!-- The aspect box reserves layout height before the image decodes, so the
page never jumps (the real cause of a bad CLS score). Swap the ratio class
for aspect-square or aspect-[3/4] as needed. -->
<div class="w-full max-w-md">
<div class="aspect-video overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
<img src="/images/photo-4.jpg" alt="Studio desk with a camera and prints" loading="lazy" class="h-full w-full object-cover" />
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
srcआवश्यक | string | - | कार्ड की तस्वीर के लिए इमेज URL। |
imageAlt | string | '' | इमेज के लिए वैकल्पिक टेक्स्ट। जब title में पहले से नाम हो तो खाली रखें। |
ratio | 'square' | 'video' | 'portrait' | 'video' | Ratio |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The aspect box reserves the exact layout height before the image decodes, which is the real fix for a poor cumulative-layout-shift score. The ratio is a prop mapped to a static class (`aspect-square`, `aspect-video`, `aspect-[3/4]`) rather than an interpolated one, so Tailwind ships the class. `object-cover` crops to fill; switch to `object-contain` to letterbox instead.