AspectRatio

Component for maintaining a fluid-width aspect ratio

import { AspectRatio } from 'theme-ui'

<AspectRatio
  ratio={16 / 9}
  sx={{
    p: 4,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'background',
    bg: 'primary',
  }}>
  <Heading>Aspect Ratio</Heading>
</AspectRatio>
<AspectRatio
  ratio={16 / 9}
  sx={{
    p: 4,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'background',
    bg: 'primary',
  }}>
  <Heading>Aspect Ratio</Heading>
</AspectRatio>

<AspectRatio ratio={16 / 9}>
  <Image
    src={images.flatiron}
    sx={{
      objectFit: 'cover',
    }}
  />
</AspectRatio>
<AspectRatio ratio={16 / 9}>
  <Image
    src={images.flatiron}
    sx={{
      objectFit: 'cover',
    }}
  />
</AspectRatio>