AspectRatio

A component that maintains a specific aspect ratio, regardless of the width.

This is particularly useful for images, videos, and other media content.

16:9 Aspect Ratio

Usage

import { AspectRatio } from '@styled-system/jsx'

<AspectRatio ratio={16 / 9} w="100%" maxW="500px">
  <img src="your-image.jpg" alt="Example" style={{ objectFit: 'cover' }} />
</AspectRatio>

AspectRatio accepts all the common layout properties plus:

Name	Type	Default	Description
`ratio`	`number`	`1`	The aspect ratio to maintain (width/height)

Responsive Aspect Ratio(Changes at different breakpoints)