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.

Source

Github

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

Examples

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.

Github

Video

Use video to embed a youtube video. A video ratio corresponds to 16 / 9.

Github

Map

Embed a Google map

Github

Landscape (3 / 2)

Use 3-2 for a landscape. A 3-2 ratio corresponds to 3 / 2.

Github

Welcome loader Loader