Place Pictures in Image Module without Stretching or Squeezing the Image

Using the image module can be a great solution for a portfolio or grid album look, but when some images are taken portrait and landscape you can have some images look great and some look squished or stretched. This can really hold true when viewing from a mobile device.

The solution is really quite easy by using a CSS property object-fit: cover. The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

So, if you have an image 1200 x 600 or an image 600 x 1200 they will just display in the image module correctly.

In my example below, you need to give your section holding the image modules a CSS Class of JSgallery

Then add a code module within the section and use this CSS style. <style> .JSgallery img {height: 220px; object-fit: cover;}</style>

This keeps everything looking great as a grid and when you click on the image for lightbox view it will open the true size of the image, whether its landscape or portrait.

A good live example of this can be seen HERE

Admin Dashboard view