eliza

Ratio

object ratio

Definition


Create ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios.

o-ratio
      <div class="o-ratio">
        <img class="o-ratio__content" src="https://dummyimage.com/1024x1024/e6e6e6/4d4d4d.jpg">
      </div>

Ratio modifiers


The objects modifiers defines the different ratios
The object ratio by default is 1:1, but exist one modifier for each ratio foundation.
Also, the ratio could be applied from a media query, using the `@mq` notation, i.e. o-ratio--3:2@md

o-ratio > o-ratio--3:2
      <div class="o-ratio o-ratio--3:2">
        <img class="o-ratio__content" src="https://dummyimage.com/1024x672/fff7ed/c25e00.jpg">
      </div>