Images aspect ratios
The implementation of Mozaic ratios in your code can be done in two ways:
- By using the
set-ratio
mixin- By using ratio helpers
The following documentation represents both of these approaches.
Using the set-ratio
mixin
Import
In order to use Mozaic ratios via the set-ratio
mixin, you must first import the _all-settings.scss
file:
@import 'settings-tools/all-settings';
Usage
Once you have imported the _all-settings.scss
file all you need to do is use the set-ratio
mixin in your code as follows:
.your-element { @include set-ratio('1x1');}
Mixin allowed value
The mixin set-ratio
accepts the following values:
ratio | mixin allowed value |
---|---|
1:1 | 1x1 |
2:3 | 2x3 |
3:2 | 3x2 |
3:4 | 3x4 |
4:3 | 4x3 |
16:9 | 16x9 |
Using ratio helpers
Import
Another way to use Mozaic ratios in your code is to use the ratio helpers.
To do this, you need to import the _all-settings.scss
file, as well as the _u.ratio.scss
file.
@import 'settings-tools/all-settings';@import 'utilities/u.ratio.scss';
Usage
Once you have made all your imports, you just need to add the following elements to your code:
- Add the class
mu-ratio
followed by a modifier corresponding to the ratio you want to use such asmu-ratio--16x9
. - Add class
mu-ratio__item
on the child element
<div class="parent-element mu-ratio mu-ratio--16x9"> <iframe class="mu-ratio__item"></iframe></div>
List of modifiers to be used
Here is the list of modifiers you can use according to the expected ratio:
ratio | associated modifier |
---|---|
1:1 | mu-ratio--1x1 |
2:3 | mu-ratio--2x3 |
3:2 | mu-ratio--3x2 |
3:4 | mu-ratio--3x4 |
4:3 | mu-ratio--4x3 |
16:9 | mu-ratio--16x9 |