Image

Images can be made reponsive very easily. Responsive images are images that never becomes wider than their parent container.


Responsive Image

Images can be made responsive by adding img-res to the img element.

Flying Eagle
              
              <img class="images__res" src="img-url" alt="Flying Eagle"/>
              
        

Round Image
Round or circular images are used in lot of place, such as profile picture. You can make image round or circular using round-images class which apply border-radius: 50% to the image element.

        
      <img class="round-images__images" src="img-url" alt="Eagle"/>
      <img class="round-images__images" src="img-url" alt="Eagle"/>
      <img class="round-images__images" src="img-url" alt="Eagle"/>
        
    

Square Image

Eagle Parrot Sparrow
              
              <img class="sq-images__images" src="img-url" alt="Eagle"/>
              <img class="sq-images__images" src="img-url" alt="Parrot"/>
              <img class="sq-images__images" src="img-url" alt="Sparrow"/>