Force Divi Images to a Uniform Size

A common problem facing website designers is that images supplied by clients aren’t uniform.

In the past, I would edit them all in Photoshop to make them uniform. Then I discovered this trick, which forces all of the images to the same aspect ratio and (as long as the widths of the image modules are the same) to the same size.

Here is an example of a random group of images.

Before: Images of Various Sizes

After: Images of Uniform Sizes

Landscape

Here I have forced them to landscape mode (16:9 ratio).

Portrait

Here I have forced them to portrait mode (16:9 ratio).

How to Force Aspect Ratio

To make this work all you have to do is:

Step 1

Assign the appropriate class (portrait or landscape) to the image modules’ CSS Class field.

Step 2

Add the following CSS to the page or to the website (not to the module).

.landscape .et_pb_image_wrap {
 padding-top: 56.25%;
 display: block;
 }
 .portrait .et_pb_image_wrap {
 padding-top: 177.78%;
 display: block;
 }
.landscape .et_pb_image_wrap img,
.portrait .et_pb_image_wrap img {
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 object-fit: cover;
 }

The code here forces the aspect ratio to be 16:9. Other aspect ratios are available. See this article for details.

11 Comments

Alex Lp on December 3, 2018 at 5:32 pm

thanks a lot, i was looking for this but for the gallery module, i adapted your code so it works for the gallery images too, this is the code if anyone else is looking for the same trick

.et_pb_gallery_image.landscape {
padding-top: 56.25%;
display: block;
}

.et_pb_gallery_image.landscape img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}

I also added the landscape word in the CSS Class of the Gallery module

Tom Greer on December 3, 2018 at 6:42 pm
Thanks. Great tip.
Reply
Jana on December 9, 2018 at 3:16 pm
Thank you Alex – that worked perfectly! I appreciate the share.
Reply
Chet Norman on January 4, 2019 at 8:01 pm
I tried this but i keep getting a error: “Expected RBRACE”. I copied the code exactly as you said… maybe i’m doing something wrong? Trying to use it in the gallery module
Reply
- Tom Greer on January 7, 2019 at 10:16 am
  Chet,
  I’ve used this code on numerous websites, so I know that it works.
  The error indicates that a right curly brace ‘}’ is missing. The problem could be elsewhere in your CSS.
  But I’m puzzled, CSS errors get ignored by browsers. Where are you seeing the error?
  Reply
  - Irina on January 11, 2019 at 11:58 am
    Thank you for sharing this! I’m seeing the same error in the Blurb field (under Advanced), when I insert your code there.
    Reply
    - Tom Greer on January 11, 2019 at 12:52 pm
      Irina, it sounds like you are pasting the code in one the module’s Custom CSS fields. That won’t work. The code needs to be added to the site’s CSS.
      There are a number of ways to do this:
      The easiest way is to insert the code using the Theme Customizer > Additional CSS.
      Another option would be to place the code in Divi > Theme Options > Custom CSS.
      However, we always have use a custom child theme and place our custom CSS in the style.css file.

I b on February 11, 2019 at 9:20 am

big help, thanks a lot!

Drake Bliss on April 3, 2019 at 12:53 pm

Thank you for the code above. We needs a DIVI Gallery Slider to keep the same height and scale the images to fit.

We put myslidegallery into the Advanced setting on the Gallery Module Settings and added the code below to the Custom CSS box on the DIVI Theme Options. Change the max-height value to the size you want.

.myslidegallery .et_pb_gallery_image.landscape img {
max-width:100%!important;
max-height:500px!important;
object-fit:contain;
}

Tom Greer on April 3, 2019 at 1:56 pm
Drake,
Thank you for sharing.
Reply

Symantha on April 13, 2019 at 4:29 pm

Thanks this worked so well!!!

Before: Images of Various Sizes