> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/layout/aspect-ratio.md).

# Aspect Ratio

## `.ratio-{width}/{height}`

Sets the aspect ratio of an element by specifying the width and height ratio.

CSS equivalent: `aspect-ratio: {width}/{height};`

Example usage:

```html
<div class="ratio-16/9">This element has an aspect ratio of 16:9.</div>
```

***

## `.ratio-{ratio}`

Sets the aspect ratio of an element by specifying a single ratio value, which will be applied to both width and height.

CSS equivalent: `aspect-ratio: {ratio};`

Example usage:

```html
<div class="ratio-1">This element has a square aspect ratio.</div>
```

***

These classes allow you to easily define the aspect ratio of an element by specifying the width and height ratio or a single ratio value. Use these classes to create responsive designs that maintain consistent aspect ratios across different devices and screen sizes.