import { AspectRatio } from 'welcome-ui/AspectRatio'const Example = () => {return (<AspectRatio className="max-w-[200px]"><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>)}export default Example
Square
ratio prop default is set to 4 / 3, and the child image or video get an object-fit: cover.
You can update the ratio using the ratio prop. Here we use square for 1 / 1 ratio.
Video
Use video to embed a youtube video. A video ratio corresponds to 16 / 9.
Map
Embed a Google map
Landscape (3 / 2)
Use 3-2 for a landscape. A 3-2 ratio corresponds to 3 / 2.