Keeps media at a fixed width-to-height ratio, with its space held before it loads.
Example
import { AspectRatio } from "@elements/ui/aspect-ratio";
<AspectRatio ratio={16 / 9}>
<img src="./hero.jpg" alt="A mountain lake at dawn">
</AspectRatio>
Parts
| Part |
What it is |
.aspect-ratio |
The box. Usable without the template: style="aspect-ratio: 16 / 9". |
Attributes
| Attribute |
Type |
Default |
Description |
ratio |
number |
1 |
Width divided by height: 16 / 9, 1, 9 / 16. |
fit |
"cover" | "contain" | "fill" |
"cover" |
object-fit for an image or video child. |
class |
string |
"" |
Extra classes: rounded corners, a background. |
attrs |
Record<string, string | number | boolean | undefined> |
{} |
Any other attributes: id, role, aria-*, data-*. |
Slots
| Slot |
Content |
default |
The media or content; each child fills the box. |
Data attributes
| Attribute |
Values |
On |
data-ratio |
the ratio |
root |
data-fit |
"cover" | "contain" | "fill" |
root |
Accessibility
- No role of its own: the image inside carries the meaning through its alt text.
- The box holds its height before the media loads, so content below it never jumps.
See also