Springboard

Intrinsic Media: Picture Element 

<picture class="intrinsic intrinsic--4x3">
    <source media="(min-width: 800px)" srcset="http://placehold.it/1600x1200?text&#x3D;Large+Detailed+Photo">
    <img src="http://placehold.it/800x600?text&#x3D;Zoomed+/+Cropped+Photo" alt="Square image">
</picture>
 
<{{ wrapper }} class="intrinsic intrinsic--{{ modifier }}">
  {{#if sources}}
  {{#each sources}}
  <source media="{{ media }}" srcset="{{ srcset }}">
  {{/each}}
  {{/if}}
  {{#if iframe}}
  <iframe width="{{ iframe.width }}" height="{{ iframe.height }}" src="{{ src }}" frameborder="0" allowfullscreen></iframe>
  {{else}}
  <img {{#if srcset}}srcset="{{ srcset }}"{{/if}} src="{{ src }}" alt="{{ alt }}">
  {{/if}}
</{{ wrapper }}>
 
{
  "wrapper": "picture",
  "modifier": "4x3",
  "src": "http://placehold.it/800x600?text=Zoomed+/+Cropped+Photo",
  "alt": "Square image",
  "sources": [
    {
      "media": "(min-width: 800px)",
      "srcset": "http://placehold.it/1600x1200?text=Large+Detailed+Photo"
    }
  ]
}
  • Content: 
    .intrinsic {

  // Make sure wrapper is set to block
  display: block;

  // Intrinsic Ratio Box
  position: relative;
  height: 0;
  width: 100%;
  padding-top: 100%; // Default to square
  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,
  > img,
  > iframe,
  > embed,
  > object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
  • URL: /components/raw/intrinsic-media/_sass.scss
  • Filesystem Path: components/01-elements/02-media/intrinsic-media/_sass.scss
  • Size: 611 Bytes

Defines image, video, or other embedded media size even before the media loads.

Advantages

  • Minimizes page repaints / reflows
  • Maintains aspect ratio on screen resize (especially useful for videos which would otherwise get squished on small viewports).

Wrap any img, iframe, embed, or object in an element with class intrinsic-media. If need to apply this to an element other than the ones listed above, add a intrinsic-media__item class.

See http://daverupert.com/2015/12/intrinsic-placeholders-with-picture/