Ratio
The Ratio component is a utility component that allows you to maintain a specific aspect ratio for a container. This is particularly useful when you want to ensure that the width and height of a container are proportional, such as for responsive image or video containers. The aspect ratio is controlled via a prop, allowing for flexible and reusable layout designs.
<Ratio ratio="16/9">
<img src="https://via.placeholder.com/1920x1080" alt="Placeholder" className="object-cover h-full" />
</Ratio>Props
| Prop | Type | Description |
|---|---|---|
| backgroundColor | string | The background color of the Ratio component. |
| bg | string | The background color of the Ratio component. |
| children | ReactNode | The content of the Ratio component. |
| h | string | The height of the Ratio component. |
| height | string | The height of the Ratio component. |
| m | number | The margin around the Ratio component. |
| margin | number | The margin around the Ratio component. |
| mb | number | The bottom margin of the Ratio component. |
| ml | number | The left margin of the Ratio component. |
| mr | number | The right margin of the Ratio component. |
| mt | number | The top margin of the Ratio component. |
| mx | number | The horizontal margin of the Ratio component. |
| my | number | The vertical margin of the Ratio component. |
| p | number | The padding around the Ratio component. |
| padding | number | The padding around the Ratio component. |
| pb | number | The bottom padding of the Ratio component. |
| pl | number | The left padding of the Ratio component. |
| pr | number | The right padding of the Ratio component. |
| pt | number | The top padding of the Ratio component. |
| px | number | The horizontal padding of the Ratio component. |
| py | number | The vertical padding of the Ratio component. |
| radius | number | The border radius of the Ratio component. |
| ratio | number | phone | fullscreen | widescreen | golden | ultrawide | half | third ... twelfth | half-y | third-y ... twelfth-y | portrait | landscape | The aspect ratio of the Ratio component. |
| ratioX | number | The horizontal aspect ratio of the Ratio component. |
| ratioY | number | The vertical aspect ratio of the Ratio component. |
| w | string | The width of the Ratio component. |
| width | string | The width of the Ratio component. |
Examples
Any of the examples below can be done either with the ratio prop or with the ratioX and ratioY props.