AspectRatio

Maintains a fixed width-to-height ratio for media or embedded content.

Examples

Widescreen

<AspectRatio {...args}>
  <img
    alt="Landscape"
    src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1200&auto=format&fit=crop"
    style={{height: '100%', objectFit: 'cover', width: '100%'}}
  />
</AspectRatio>

Ratios

1:1

4:3

16:9

<div
  style={{display: 'grid', gap: 16, gridTemplateColumns: 'repeat(3, 1fr)'}}>
  {[1, 4 / 3, 16 / 9].map(ratio => (
    <AspectRatio key={ratio} ratio={ratio}>
      <div
        style={{
          alignItems: 'center',
          background: '#eef2f5',
          display: 'flex',
          height: '100%',
          justifyContent: 'center',
          width: '100%',
        }}>
        {ratio === 1 ? '1:1' : ratio === 4 / 3 ? '4:3' : '16:9'}
      </div>
    </AspectRatio>
  ))}
</div>

API

AspectRatio

Maintains a fixed width-to-height ratio for media or embedded content.

Prop	Type	Default	Description
data-testid	string	—	Test ID applied to the root element.
ratio*	number	—	Width divided by height, such as 16 / 9, 4 / 3, or 1.