WUI logo

AspectRatio

Reponsive ratio to images, videos and more

version

4.2.0

install

yarn add @welcome-ui/aspect-ratio

usage

import { AspectRatio } from '@welcome-ui/aspect-ratio'

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>

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>

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>

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>

Properties #

NameType(s)DefaultRequired
ratio
number
4 / 3

Packages #

Dependencies #
Peer dependencies #

Previous

Customize

Next

Box