Aspect ratio

How to use

  • aspect-ratio-3:2
  • aspect-ratio-4:3
  • aspect-ratio-16:9
  • aspect-ratio-21:9

Aspect ratio classes work for img, video, iframe, and object elements. The element must be inside a .aspect-ratio-* container and have the class .aspect-ratio-item as in the following example:


<div class="aspect-ratio-16:9">
  <iframe class="aspect-ratio-item" src="..." frameborder="0"></iframe>
</div>

Custom aspect ratio

If for some reason you need a different aspect ratio class, you can use an aspect ratio mixin.

This mixin will not be available if you have imported Shido via CDN.


// .mix-aspect-ratio(width,height);

.mix-aspect-ratio(9,5);

    

// @include mix-aspect-ratio(width,height);

@include mix-aspect-ratio(9,5);

    

<div class="aspect-ratio-9:5">
  <iframe class="aspect-ratio-item" src="..." frameborder="0"></iframe>
</div>

Examples

3:2

4:3

16:9

21:9