AspectRatio

Image #

Ratio default is set to 4 / 3, and the child image or video get and object-fit: cover.

<AspectRatio maxWidth={200}>
  <Box
    as="img"
    src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80"
  />
</AspectRatio>
Copy

You can change ratio by 1 to get a square:

<AspectRatio ratio={1} maxWidth={200}>
  <Box
    as="img"
    src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80"
  />
</AspectRatio>
Copy

Video #

Embed a youtube video:

<AspectRatio ratio={16 / 9}>
  <iframe
    src="https://www.youtube.com/embed/jNQXAC9IVRw"
    title="YouTube video player"
    frameborder="0"
    allowfullscreen
  />
</AspectRatio>
Copy

Map #

Embed a Google map:

<AspectRatio ratio={16 / 9}>
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.5449632344926!2d2.340616916425052!3d48.86688687928823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e3d283631cf%3A0xea76ccc710fa2440!2sRue%20du%20Mail%2C%2075002%20Paris!5e0!3m2!1sfr!2sfr!4v1646929709530!5m2!1sfr!2sfr"
    frameborder="0"
    allowfullscreen
    loading="lazy"
  />
</AspectRatio>
Copy

Properties #

Packages #

Dependencies #

Peer dependencies #