AspectRatio
Reponsive ratio to images, videos and more
version
4.1.2
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}><Boxas="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}><Boxas="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}><iframesrc="https://www.youtube.com/embed/jNQXAC9IVRw"title="YouTube video player"frameborder="0"allowfullscreen/></AspectRatio>
Map #
Embed a Google map:
<AspectRatio ratio={16 / 9}><iframesrc="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"allowfullscreenloading="lazy"/></AspectRatio>
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
ratio | number | 4 / 3 |