Aspect Ratio

Example

Related

• •
  Image — Implements the AspectRatio component internally.

Props

Value

You might expect this to be a number, but it’s actually a string. Because the value is passed straight to the aspect-ratio CSS property we avoid operations that may lead to rounding/precision issues, and instead let the browser handle interpretation.

// typical use case
<AspectRatio value="16 / 9" />

// equal width and height
<AspectRatio value="1" />

// pre-calculated 7:5 equivalent
<AspectRatio value="1.4" />

Patterns

Responsive video

One of the most common cases for AspectRatio is displaying media content that responds to the width of its container. An easy way to ensure the correct ratio for a video is to provide the value as {width}/{height}, which will always be accurate.