AspectRatio

The Aspect Ratio component ensures that elements maintain a consistent width-to-height ratio across different screen sizes. It helps keep interfaces visually balanced and prevents distortion of content by preserving the specified aspect ratio.

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.