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%;
  }