This is particularly useful for images, videos, and other media content.
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) |