Mushilu-San UI Aspect ratio
Keeps its content at a fixed width-to-height ratio, such as 16:9 for video.
Selector: mui-aspect-ratio
import { AspectRatio } from '@mushilu-san/ui/layout';Loading example…
Overview
ratio input is width divided by height, so 16 / 9 is the default.
When to use
Keeping a video, image or map at a fixed shape while the layout width changes. Reserving space for media so the page does not shift when it loads.
When not to use
Text content with an unknown height. Let it size itself.
Guidelines
Do
Give images a meaningful alttext when they are content.
Don't
Do not use it to force text into a shape. Text can overflow the box.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — |
Make sure the content inside is accessible, such as an image with altor a video with captions.
API
AspectRatio
| Name | Type | Default | Description |
|---|---|---|---|
ratio | number | 16 / 9 | Numeric ratio — width divided by height. Default 16/9 ≈ 1.778. |
CSS parts
::part(inner)::part(root)
Tokens
--mui-radius-md