Layout

Aspect ratio

Lock media to an inline-to-block ratio.

AspectRatio locks a frame to an inline-to-block ratio and sizes its direct child to fill the frame. Use it for media such as an iframe, img, or video. Images and videos use objectFit="cover" by default. Pass another objectFit value to change how they fit the frame. Read Layout to choose a layout component.

Aspect ratio: Basic

Open in playground

import { AspectRatio } from '@luke-ui/react/aspect-ratio';
import { Container } from '@luke-ui/react/container';
import { vars } from '@luke-ui/react/theme';

export default () => {
	return (
		<Container maxInlineSize="container.672">
			<AspectRatio ratio="16 / 9">
				<iframe
					src="https://www.youtube.com/embed/K5uS5DIKQbU"
					style={{ borderRadius: vars.radius.detail }}
					title="YouTube video player"
				/>
			</AspectRatio>
		</Container>
	);
};

Aspect ratio: Basic

Loading Aspect ratio: Basic example

Choose the rendered element

AspectRatio uses Box's elementType and renderRoot contract.

Aspect ratio: Figure

Open in playground

Looking up between tall canyon walls at a strip of blue sky

import { AspectRatio } from '@luke-ui/react/aspect-ratio';
import { Container } from '@luke-ui/react/container';
import { vars } from '@luke-ui/react/theme';

export default () => {
	return (
		<Container maxInlineSize="container.672">
			<AspectRatio elementType="figure" ratio="4 / 3">
				<img
					alt="Looking up between tall canyon walls at a strip of blue sky"
					src="https://images.unsplash.com/photo-1479030160180-b1860951d696?auto=format&fit=crop&w=1200&q=80"
					style={{ borderRadius: vars.radius.detail }}
				/>
			</AspectRatio>
		</Container>
	);
};

Aspect ratio: Figure

Loading Aspect ratio: Figure example

API

AspectRatioProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type	Default
alignSelf	<"auto" \|⁠ "baseline" \|⁠ "center" \|⁠ "flex-end" \|⁠ "flex-start" \|⁠ "normal" \|⁠ "stretch"> \|⁠ undefined	—
blockSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
borderBlockEndWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
borderBlockStartWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
borderInlineEndWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
borderInlineStartWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
flexBasis	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "content" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
flexGrow	<"0" \|⁠ "1"> \|⁠ undefined	—
flexShrink	<"0" \|⁠ "1"> \|⁠ undefined	—
inlineSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
inset	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetBlock	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetBlockEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetBlockStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetInline	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetInlineEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetInlineStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
justifySelf	<"auto" \|⁠ "center" \|⁠ "end" \|⁠ "normal" \|⁠ "start" \|⁠ "stretch"> \|⁠ undefined	—
margin	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginBlock	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginBlockEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginBlockStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginInline	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginInlineEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginInlineStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
maxBlockSize	<"0" \|⁠ "100%" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content" \|⁠ "none"> \|⁠ undefined	—
maxInlineSize	<"0" \|⁠ "100%" \|⁠ "container.448" \|⁠ "container.672" \|⁠ "container.896" \|⁠ "container.1152" \|⁠ "container.1280" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content" \|⁠ "none"> \|⁠ undefined	—
minBlockSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
minInlineSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
objectFit		`cover`
How replaced media fits inside the filled frame.
order	<number> \|⁠ undefined	—
overflow	<"auto" \|⁠ "clip" \|⁠ "hidden" \|⁠ "scroll" \|⁠ "visible"> \|⁠ undefined	—
overflowX	<"auto" \|⁠ "clip" \|⁠ "hidden" \|⁠ "scroll" \|⁠ "visible"> \|⁠ undefined	—
overflowY	<"auto" \|⁠ "clip" \|⁠ "hidden" \|⁠ "scroll" \|⁠ "visible"> \|⁠ undefined	—
overscrollBehavior	<"auto" \|⁠ "contain"> \|⁠ undefined	—
padding	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingBlock	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingBlockEnd	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingBlockStart	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingInline	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingInlineEnd	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingInlineStart	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
placeSelf	<"auto" \|⁠ "center" \|⁠ "end" \|⁠ "normal" \|⁠ "start" \|⁠ "stretch"> \|⁠ undefined	—
position	<"absolute" \|⁠ "fixed" \|⁠ "relative" \|⁠ "static" \|⁠ "sticky"> \|⁠ undefined	—
ratio		`"1 / 1"`
Inline-to-block ratio of the frame.