Luke UI
GitHub repository

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
Loading Aspect ratio: Basic example

Choose the rendered element

AspectRatio uses Box's elementType and render contract.

Aspect ratio: Figure
Loading Aspect ratio: Figure example

API

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

Prop

Type