Aspect Ratio

The Aspect Ratio component shapes the content with the specified ratio.

The default implementation combines height: 0px with percentage padding-bottom to create the proper aspect ratio of the content. (It will be replaced by the CSS aspect-ratio in the future once it has sufficient various browser support).

• The content to fit the area of the aspect ratio component must be its first direct child.
• It is designed to be composed with other components, eg. Card.

Basic usage

The default aspect ratio is 16/9.

Ratio

Use the ratio prop to change the aspect ratio. The value will used by the CSS calc().

Media

Place a native html <img> or <video> as a first direct child of the aspect ratio component.

Use the objectFit prop to change how the media should be resized in order to fit the aspect ratio component. It has object-fit: cover by default.

Controlling the height

Use minHeight and maxHeight to set the lower and upper bound of the component's height. This is useful when the aspect ratio is used in a component that has dynamic width.

Inside a flex row

When the aspect ratio component is placed as a child of a flexbox row container, use flex-basis to set the ideal width of the aspect ratio.

Common examples

Mobile Carousel

Make sure to keep your content concise given the limited width real estate available. Since the texts are short, we can set white-space: nowrap to make the title stay in one line. The min-width CSS property is necessary on the aspect ratio component to prevent it from shrinking to zero.

List stack

This is a simple illustration of composing aspect ratio with list components.