Ratio

Config


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

Example output classes

With this config value, the following classes will be available :

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.


.element {
  @include 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%;
  }