@include intrinsic(16/9);

A simple mixin for easy intrinsic ratios.

Why?

Intrinsic ratios are pretty sweet for making certain content responsive. They're also pretty sweet for helping to mitigate page reflow (something visitors really hate).

A lot of people use stuff like FitVids.js to help make YouTube videos and such responsive, but it seems pretty heavy-handed to use a JS lib for a simple CSS technique. It also obfuscates what's going on and people tend to just throw it in their stack whenever they are embedding a YouTube video.

This approach combines Dave Rupert's (FitVids' author) mixin approach with Matthijs Kuiper's &::before approach and sprinkles in the ability to feed it your own ratios for various content and background-color while said content is loading.

When should I use this?

Use it on embedded videos, maps, and pretty much anywhere you have an element with a standardized size (thumbnails, hero images, etc.) to help prevent page reflow.

Installation

• bower install intrinsic
• @import 'bower_components/intrinsic/intrinsic';

Usage

CodePen Demo Be sure to throttle your connection ("Regular 2G" is good) to see how how it looks in low-bandwidth settings.

.youtube {
  @include intrinsic(); // defaults to 16/9
}

.bg-cover {
  @include intrinsic(2/1);
  
  background: lighten(dodgerblue, 25%) url(https://www.fillmurray.com/1600/900) center no-repeat;
  background-size: cover;
}

<div class="youtube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/JhHMJCUmq28" frameborder="0" allowfullscreen></iframe>
</div>

<div class="bg-cover"></div>

Options

• $ratio - The width/height ratio (preferably without units, see below). Defaults to 16/9.
• $bg - The background color. Defaults to darken(white, 5%). You need to manually add this to your background property if you use the background cover technique (see the example code).

Note: You can use fixed numbers but they'll get stripped. intrinsic(1600px/900px) turns into 1600/900. This is because we can't divide numbers with units (not even with calc).