About Ratio
The ratio special utility applies percentage based padding in order to simulate various common screen aspect ratios.
Basic Usage
To apply ratio, assign the class ratio-<aspect-ratio> to any element.
Square 1:1
16:9
4:3
2:1
16:10
<div class="ratio-square">...</div>
<div class="ratio-16-9">...</div>
<div class="ratio-4-3">...</div>
<div class="ratio-2-1">...</div>
<div class="ratio-16-10">...</div>Disabling Ratio
To disable this special utility, simply pass in ratioto the excludes setting in your configuration.
@use "uniform" as * with (
$config: (
excludes: (
ratio
)
)
);