Aspect Ratio

import * as AspectRatio from '@radix-ui/react-aspect-ratio';

export default () => (
  <div style={{ width: 300 }}>
    <AspectRatio.Root ratio={16 / 9}>
      <img
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b"
        alt="Landscape"
        style={{
          objectFit: 'cover',
          width: '100%',
          height: '100%',
        }}
      />
    </AspectRatio.Root>
  </div>
);

import * as AspectRatio from '@radix-ui/react-aspect-ratio';

export default () => (
  <div style={{ width: 300 }}>
    <AspectRatio.Root ratio={1}>
      <img
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b"
        alt="Square image"
        style={{
          objectFit: 'cover',
          width: '100%',
          height: '100%',
        }}
      />
    </AspectRatio.Root>
  </div>
);

import * as AspectRatio from '@radix-ui/react-aspect-ratio';

export default () => (
  <div style={{ width: 500 }}>
    <AspectRatio.Root ratio={4 / 3}>
      <video
        src="https://example.com/video.mp4"
        controls
        style={{
          width: '100%',
          height: '100%',
        }}
      />
    </AspectRatio.Root>
  </div>
);