$_ACCOUTREMENT-ASPECT-RATIOS
scss
$_ACCOUTREMENT-ASPECT-RATIOS: ( // sass-lint:disable-line variable-name-format
'octave': 2,
'major-seventh': (15 / 8),
'minor-seventh': (16 / 9),
'major-sixth': (5 / 3),
'minor-sixth': (8 / 5),
'fifth': (3 / 2),
'augmented-fourth': (45 / 32),
'fourth': (4 / 3),
'major-third': (5 / 4),
'minor-third': (6 / 5),
'major-second': (9 / 8),
'minor-second': (16 / 15),
'photo': 'fifth',
'classic': 'fourth',
'widescreen': 'minor-seventh',
'cinima': 2.39,
'golden': 1.618,
);Description
Some default named ratios you can use, but shouldn't edit.
used by
@function _get-aspect-ratio() [private]
$aspect-ratios
scss
$aspect-ratios: () !default;Description
Name your own aspect ratios!
used by
@function _get-aspect-ratio() [private]
@mixin fluid-ratio()
Description
Establsih a fluid-height container based on an aspect ratio.
Parameters
$ratio: 'widescreen' (float | string)
The ratio of width over height, or a ratio keyword.
$width: 100% (perentage)
The established fluid width of the element.
$position: relative (relative | absolute | fixed | null)
Establish a positioning context, so children can be stretched to fit.
Example
scss
.media {
@include fluid-ratio('widescreen');
}css compiled
.media {
height: 0;
padding-top: 56.25%;
position: relative;
width: 100%;
}
requires
@function fluid-ratio()
@function fluid-ratio()
Description
Return a padding-height based on a given ratio and fluid width.
Parameters & Return
$ratio: 'widescreen' (float | string)
The ratio of width over height, or a ratio keyword.
$width: 100% (perentage)
The established fluid width of the element.
@return (percentage)
A fluid height, based on the width and ratio.
Example
scss
.media {
width: 100%;
padding-top: fluid-ratio('widescreen');
}css compiled
.media {
width: 100%;
padding-top: 56.25%;
}