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>