ratio-content.scss

ratio.scss

/*
Media Ratios

Media content can be locked to a certain ratio using a container / content
HTML structure and the classes below to change the persistent ratio. The ratio
defaults to 1:1

Markup:
<div class="ratio-lock grid-4 {$modifiers}">
  <img class="ratio-content" src="//fillmurray.com/g/350/250">
</div>
<div class="ratio-lock grid-4 {$modifiers}">
  <div class="ratio-content" style="background: #eee;">
    {$modifiers}
  </div>
</div>

.ratio2_1 - 2:1
.ratio3_2 - 3:2
.ratio4_3 - 4:3
.ratio16_9 - 16:9
.ratio_golden - 16.18:10

Styleguide 6.6
 */
.ratio-lock {
  position: relative;

  // 1:1 ratio
  &:before {
  content: '';
  display: block;
  padding-top: 100%;
  }
  // Standard elements
  [class*="-content"] {
    display: block;
    @extend %cover-absolute;
  }
  // Specifically for images
  img[class*="-content"] {
    width: 100%;
    height: 100%;
  }

  // Auxiliary ratio override classes
  &.ratio2_1:before{
    padding-top: 100% * 1/2;
  }
  &.ratio3_2:before{
    padding-top: 100% * 2/3;
  }
  &.ratio4_3:before{
    padding-top: 100% * 3/4;
  }
  &.ratio16_9:before{
    padding-top: 100% * 9/16;
  }
  &.ratio_golden:before {
    padding-top: 61.8%;
  }
}

%cover-absolute {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}