intrinsic.scss

// intrinsic.scss ------------------------
// An Intrinsic Ratio Component
// From http://daverupert.com/2015/12/intrinsic-placeholders-with-picture/
// ---------------------------------------

.intrinsic {

  // Make sure <picture> wrapper is set to block
  // Max-width is governed by parentNode
  display: block;

  // Intrinsic Ratio Box
  position: relative;
  height: 0;
  width: 100%;
  padding-top: 100%; // Default to square

  // Custom Styling
  background: #f0f0f0;

  // Add as many ratios as you'd like...
  &.intrinsic--square {
    padding-top: 100%;
  }

  &.intrinsic--4x3 {
    padding-top: 75%;
  }

  &.intrinsic--16x9 {
    padding-top: 56.25%;
  }

  // Force the item to fill the intrinsic box
  .intrinsic-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}