WUI logo

AspectRatio

Reponsive ratio to images, videos and more

version

5.0.0-alpha.16

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.

You can change ratio by 1 to get a square:

Video #

Embed a youtube video:

Map #

Embed a Google map:

Properties #

NameType(s)DefaultRequired
ratio
number
4 / 3

Packages #

Dependencies #
Peer dependencies #

Previous

Customize

Next

Box