Evo

Image Ratio

Image ratios for images using <img /> or <div> tags. Images will span 100% of their container.

Example Image Ratio

<img class="evo-image image-ratio-16-9 image-fpo" />

Combine the evo-image class with any image-ratio-[number] class. image-ratio-16-9 is the popular video ratio of 16:9. image-ratio-9-16 is 16:9 but vertically oriented. image-ratio-1-1 is a square.

image-ratio-[number]

image-ratio-1-1
image-ratio-16-9
image-ratio-9-16
image-ratio-5-8
image-ratio-8-5
image-ratio-5-7
image-ratio-7-5
image-ratio-4-6
image-ratio-6-4
image-ratio-4-3
image-ratio-3-4
image-ratio-3-2
image-ratio-2-3