Aspect Ratio

Aspect ratio allows usage of specified dimensions without a fixed height. The aspect ratio syntax is HorizontalRatio:VerticalRatio. For example, YouTube videos are in a 16:9 aspect ratio regardless of what the precise width may be.

Usage

import AspectRatio from '@ui-pack/react/aspect-ratio'

Landscape - Youtube
Portrait
<div style={{ display: 'grid', gridAutoFlow: 'column', color: '#222' }}>
  <AspectRatio width="200" ratio="16:9" style={{ background: '#bbb' }}>
    Landscape - Youtube
  </AspectRatio>
  <AspectRatio as="img" width="200" ratio="1:1" src="https://picsum.photos/200" />
  <AspectRatio width="200" ratio="8:10" style={{ background: '#bbb' }}>
    Portrait
  </AspectRatio>
</div>
<div style={{ display: 'grid', gridAutoFlow: 'column', color: '#222' }}>
  <AspectRatio width="200" ratio="16:9" style={{ background: '#bbb' }}>
    Landscape - Youtube
  </AspectRatio>
  <AspectRatio as="img" width="200" ratio="1:1" src="https://picsum.photos/200" />
  <AspectRatio width="200" ratio="8:10" style={{ background: '#bbb' }}>
    Portrait
  </AspectRatio>
</div>

Notes

• See browser support for CSS aspect-ratio
• Read Una Kravets describing the aspect-ratio in CSS

Props