Image

An image is a visual representation of something, it can be responsive to fit the parent's width, and also can be customised to be round shaped, curved sqaure shaped.

Responsive image

To make your image responsive, you can add class res-img to your image, it will automatically fit to the parents container size. 


<img
  class="res-img"
  src="https://s3-us-east-2.amazonaws.com/capturetheatlas.com/wp-content/uploads/2020/06/09105454/Best-Milky-way-photographs-Utah.jpg"
  alt=""
/>

Square & round shaped images

To make your image square shaped you can add class sq-img to your image, for rounded image to will have add class rounded-img (e.g., class="sq-img rounded-img")

ocean image beach image snow wildlife image 

<img
    class="sq-img"
    src="https://images.unsplash.com/photo-1643892648551-241d371de669?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
    alt="ocean image"
/>

<img
    class="sq-img"
    src="https://images.unsplash.com/photo-1643892632961-994a10fc139c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80"
    alt="beach image"
/>

<img
    class="sq-img rounded-img"
    src="https://cdn.pixabay.com/photo/2016/10/21/14/46/fox-1758183__340.jpg"
    alt="snow wildlife image"
/>