WUI logo

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@welcome-ui/aspect-ratio
OverviewProps
import * as React from 'react'
import { AspectRatio } from '@welcome-ui/aspect-ratio'
import { Box } from '@welcome-ui/box'


const Example = () => {
  return (
    <AspectRatio maxWidth={200}>
      <Box
        as="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

Installation

1

Run the following command:

yarn add @welcome-ui/aspect-ratio
2

Import component:

import { AspectRatio } from '@welcome-ui/aspect-ratio'

Examples

Square

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

ToastBox