All components (204)
Aspect ratio
Layout · AspectRatio
What it is and when to use it
A box with a fixed ratio, width to height, that takes the full width of its space. What is inside fills it completely even if it has no size of its own.
When to use it
- An embedded video, a map or an
iframe: they bring no size of their own, and without a box that reserves their space the page jumps when they finish loading. ratiois the ratio as written in CSS:16 / 9(the default),4 / 3,1for a square.asrenders the right element instead of thediv.
When not to
- An IMAGE:
Thumbnail, which also brings the fallback if it fails, the crop and lazy loading. - An area that grows with its content: whatever does not fit in the ratio is cut off (
overflow: hidden), so it is no good for text of variable length.
Keyboard: it does not take part: it only gives a size. What is inside keeps its own (an iframe or a video take focus as always).
Accessibility: reserving the space before it loads keeps the content below from moving while it is being read. The name of what is inside is set by whoever renders it: an iframe needs its title and a video, its captions.
Fine-tuning: --amset-ratio, the ratio; ratio writes it inline.
What it looks like
1
4/3
16/9
<AspectRatio ratio="16/9">
<Card variant="flat">
<Center>
<Text ink="secondary">16/9</Text>
</Center>
</Card>
</AspectRatio>Props
Import it with import { AspectRatio } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
childrenrequired | ReactNode | — |
as | "article" | "aside" | "div" | "footer" | "header" | "main" | "nav" | "section" | "span" | — |
className | string | Merged with the library classes; it does not replace them. |
ratio | string | The proportion, width over height: `16 / 9` is written `16 / 9`. By default `16 / 9`. |
style | CSSProperties | — |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: