Aspect Ratio

The new aspect ratio utility classes allow you to use the new CSS property aspect-ratio. If you need to support older browsers, you better use the ratio padding trick (see more in the ratio section).

Configuration

config.scss

$s-aspect-ratios: (
   "aspect-ratio-1x1": "1/1",
   "aspect-ratio-4x3": "4/3",
   "aspect-ratio-16x9": "16/9",
   // you can add yours
),

Example output classes

With these config values, the following classes are created :

aspect-ratio-1x1 aspect-ratio-4x3 aspect-ratio-16x9

Html structure

Add the ratio class to a any div

<div class="aspect-ratio-16x9"></div>