Components

Utilities

Fonts

Showcase

Donations

Login

Sign up

Github

Discord

ratio

<div ratio="1/3">... </div>

The ratio utility defines the proportions of an element.

Imagine you want an image in a 16/9 format. To achieve that you just need to add `ratio="16/9"` to your image.

You can set ratio as fraction (like 16/9) or as decimal number (like 0.3)

This proportions will be kept on every screen-size.

Try to change the ratio bellow and resize the frame to see how the ratio is preserved.

<img src="/static/images/venus.jpg" ratio="16/9">