sunweb

Crop

object crop

Definition


The crop object fixes a ratio container, and hides the overflowed content.

o-crop o-crop--1:1
      <div class="o-crop o-crop--1:1">
        <div class="o-crop__content">
          <img src="https://dummyimage.com/3000x3000/e6e6e6/4d4d4d.jpg">
        </div>
      </div>

Ratio modifiers


The ratio modifiers defines the different ratios.
In the crop object there is no default ratio, the class that specifies the ratio is mandatory. There are as many ratios available as ratio foundations.
Also, the ratio could be applied from a media query, using the `@mq` notation, i.e. o-crop--3:2@md

o-crop > o-crop--3:2
      <div class="o-crop o-crop--3:2">
        <div class="o-crop__content">
          <img src="https://dummyimage.com/3000x2000/fff7ed/c25e00.jpg">
        </div>
      </div>

Alignment modifiers


The content alignment modifiers allows to crop the content from a certain point.
The default alignment is top, but there are available modifier for each cardinal point: top, left, right, bottom and center.
Keep in mind that the modifier is applied to the content, not the object itself.

o-crop > o-crop__content.o-crop__content--bottom
      <div class="o-crop o-crop--3:2">
        <div class="o-crop__content o-crop__content--bottom">
          <img src="https://dummyimage.com/3000x3000/fff7ed/c25e00.jpg">
        </div>
      </div>