Images aspect ratios

The implementation of Mozaic ratios in your code can be done in two ways:

1. By using the set-ratio mixin
2. 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:

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:

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.

Usage

Once you have made all your imports, you just need to add the following elements to your code:

1. Add the class mu-ratio followed by a modifier corresponding to the ratio you want to use such as mu-ratio--16x9.
2. Add class mu-ratio__item on the child element

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