A simple mixin for easy intrinsic ratios.
npm install intrinsic![Bower]()
A simple mixin for easy intrinsic ratios.
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.
bower install intrinsic@import 'bower_components/intrinsic/intrinsic';``scss
.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;
}
`
`html
$3
- $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`).