Images

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.

Ratio

For using 4:3 ratio size between the width and the height add class .img-4by3 modifier class.

Design
HTML

<!-- Images -->
 <span>
     <img src="../assets/images/placeholder/4by3.jpg" alt="" class="rounded img-4by3-xl" />
 </span>
 <span>
     <img src="../assets/images/placeholder/4by3.jpg" alt="" class="rounded img-4by3-lg" />
 </span>
 <span>
     <img src="../assets/images/placeholder/4by3.jpg" alt="" class="rounded img-4by3-md" />
 </span>
 <span>
     <img src="../assets/images/placeholder/4by3.jpg" alt="" class="rounded img-4by3-sm" />
 </span>
 <span>
     <img src="../assets/images/placeholder/4by3.jpg" alt="" class="rounded img-4by3-xs" />
 </span>