Ratio

Configuration

config.scss


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

Example output classes

With these config values, the following classes are created :

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

Html structure

Add the ratio class to a parent div


  <div class="ratio-16x9">
    <div>A child div or iframe, img, etc. </div>
  </div>

Mixin

You can also use a mixin to add a ratio to an existing class.

_partial.scss


   @use "sailorcss" as s;

   .element {
      @include s.ratio(16 9);
   }

Mixin arguments

The mixin needs 2 arguments when you use it with include.

@include ratio($ratio, $selector)

$ratio

2 integers, with a space between.

$selector (optionnal)

The class of the first child in your div. Default will be > :first-child"

Return value


padding-bottom: 56% // example -> the return percentage
position: relative;

  > :first-child { // or custom class if argument exists
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
  }