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:

@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');
}

<div class="example">
  <div class="example-element">
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/GS01rL9vU9w"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>
</div>

Mixin allowed value

The mixin set-ratio accepts the following values:

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:

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

<div class="parent-element mu-ratio mu-ratio--16x9">
  <iframe class="mu-ratio__item"></iframe>
</div>

<div class="example">
  <div class="example-element mu-ratio mu-ratio--16x9">
    <iframe
      class="mu-ratio__item"
      width="560"
      height="315"
      src="https://www.youtube.com/embed/GS01rL9vU9w"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>
</div>

List of modifiers to be used

Here is the list of modifiers you can use according to the expected ratio: