Layout

Aspect Ratio

This component is used to create a container with a fixed aspect ratio around a media provider.

# Usage

The <AspectRatio> component creates a container that will try to hold the dimensions of the desired aspect ratio. Fixed dimensions are great for creating uniform and responsive boxes, or avoiding layout shifts while media loads over the network.

          
1
2
3
4
5
6
7
8
9
10
11
12
		    

# aspect-ratio

You can skip using this component, and use the aspect-ratio CSS property if browser support for it is suitable to your application.

        video {
  aspect-ratio: 16 / 9;
}