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 and 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 dmdGallery

Then add a code module within the section and use this CSS style. <style> .dmdGallery img {height: 350px; 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. Keep in mind if you are doing this using the visual builder the 350 height set in the style is working, it just wont show until you save and exit visual builder.