📪Aspect Ratio
.ratio-{width}/{height}
.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}
.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.
Last updated