Image Ratio

Image ratios for images using img tags.

Image Ratio

.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

The .image-ratio-[size] classes are helpful for displaying containers with background images displayed at a fixed ratio. .image-ratio-1-1 is a square. .image-ratio-16-9 is a popular video ratio of 16:9. .image-ratio-9-16 is 16:9 but vertically oriented.


   <img class="image-ratio-1-1"></p>

image-ratio-fill