📪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:

<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:

<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.