精选最新
图片Image Gallery Grid
An even, responsive grid of square thumbnails that steps from two up to four across.
#image#gallery#grid
2 个框架初级
Loading…
An image and its caption tied together with figure and figcaption, in a rounded frame.
<!-- figure + figcaption ties the caption to the image semantically. The image
is decorative to the caption's text, but here it carries its own meaning,
so it keeps real alt. -->
<figure class="mx-auto w-full max-w-lg">
<div class="aspect-[4/3] overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
<img src="/images/photo-1.jpg" alt="Sunrise over a mountain ridge" loading="lazy" class="h-full w-full object-cover" />
</div>
<figcaption class="mt-3 text-sm leading-relaxed text-gray-500 dark:text-gray-400">
First light on the ridge, shot on a 35mm lens at f/8.
</figcaption>
</figure>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
src必填 | string | - | 卡片配图的图片 URL。 |
imageAlt | string | '' | 图片的替代文本。若 title 已说明图片内容则留空。 |
caption | string | - | 表格标题，会先于内容播报给屏幕阅读器。 |
className | string | - | 合并到根元素上的额外类名。 |
`<figure>` with `<figcaption>` links the caption to the image semantically, so assistive tech reads them as one unit. The image keeps real `alt` because it carries meaning of its own here; make the `alt` empty only when the caption fully describes it. The `aspect-[4/3]` box reserves height so the caption never jumps up as the photo decodes.