Aspect Ratio

Maintain consistent dimensions for media content

Use the AspectRatio component to maintain consistent dimensions for media content across different screen sizes by locking in a specific width-to-height ratio. They provide visual consistency in responsive design, and ensures that media scales correctly on various devices.

---
import { AspectRatio } from 'webcoreui/astro'
---

<AspectRatio ratio="21/9">
    <Box>21:9</Box>
</AspectRatio>

<script>
    import { AspectRatio } from 'webcoreui/svelte'
</script>

<AspectRatio ratio="21/9">
    <Box>21:9</Box>
</AspectRatio>

import React from 'react'
import { AspectRatio } from 'webcoreui/react'

const Component = () => (
    <AspectRatio ratio="21/9">
        <Box>21:9</Box>
    </AspectRatio>
)

export default Component

To use the AspectRatio component, wrap your element into the component and specify your aspect ratio in the ratio prop. You can use the following syntax to set the aspect ratio:

<AspectRatio ratio="16/9">...</AspectRatio>
<AspectRatio ratio="4:3">...</AspectRatio>

<!-- All of the below will produce the same result -->
<AspectRatio ratio="1/1">...</AspectRatio>
<AspectRatio ratio="1:1">...</AspectRatio>
<AspectRatio ratio="1">...</AspectRatio>

API

type AspectRatioProps = {
    ratio: string
    className?: string
}