Project the image gallery to front(150%) without using extra images(while making responsive)

While we are making a site responsive, we can make too many alterations especially while making image gallery responsive. My requirement was to make each of the image project 150% to the front in small devices.

One image should occupy the entire row and next image after the other.

The cod used here to change the alignment while making responsive is increase the height of the current image to 91vw and object-fit the image.

Call the class in required media query and edit.

.className{        height: 91vw;    object-fit: cover;            }

Also one thing that you have to make sure is that while creating the image gallery, use bootstrap so that while making it responsive, one image contains one full row.

Change the height according to the requirements.

Leave a comment

Your email address will not be published. Required fields are marked *