Divi Mobile Solutions

Place Pictures in Image Module without Stretching or Squeezing the Image

Written by Divi Mobile Team

On December 11, 2016

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 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.

 

You May Also Like…

How to Control the Divi Mobile Menu Top Border

How to Control the Divi Mobile Menu Top Border

Adding some color or flare to your divi mobile menu is a nice idea, but what if want to control it on a page by page basis? Yes it is possible with a little bit of CSS. You may even want the whole top border to be gone and not used at all. The CSS is listed below. You...

How To Add Text Above or Below the Mobile Hamburger Menu

How To Add Text Above or Below the Mobile Hamburger Menu

Adding some text below or above the mobile hamburger menu on Divi is really easy to add and edit to your liking.  With the code below simply add it to your Divi / Theme Options / Global CSS and you are done. You can change  the word MENU to anything you like, change...

0 Comments

Submit a Comment

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