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.
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
Thanks. Great tip.
Thank you Alex – that worked perfectly! I appreciate the share.
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
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?
Thank you for sharing this! I’m seeing the same error in the Blurb field (under Advanced), when I insert your code there.
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:
Thank you @Alex Lp for this. It’s what I’ve been struggling with and SCREAMING to change, but couldn’t make it happen.
Greatly appreciated and now my gallery looks uniform!
Cheers,
Very helpful, thanks!
big help, thanks a lot!
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;
}
Drake,
Thank you for sharing.
Hello there
I searched for some time looking for this solution. Work perfectly, thank you for sharing.
Wayne
Thanks this worked so well!!!
THANK YOU!!!!
It seems to work for me too.
But how do I decide/make a setting of what part of the picture will be highlighted on my page?
Thanks for sharing the code, as I’m a noob in this.
By default, images are centered within the content-box. To specify that a different portion of the picture should be displayed, you’ll need to use the object-postion property. Here is an article that explains this in more detail. https://css-tricks.com/almanac/properties/o/object-position/
Wow! Thank you so much for those tips! Brilliant! I’ve been ages looking forward a solution for image and gallery modules to make them the height I want. Now I need to find the same solution for blurb module images. Any suggestion? Thanks a lot. Great website this one ;–)
Did you find for blurb images ? Can you share please
For Mark and Clara,
Per your request, I have just published a new article, “Force Divi Blurb Module Images to a Uniform Size”. You can find it here: https://trgwebdev.com/force-divi-blurb-module-images-to-a-uniform-size/
Thank You Worked Perfectly!
How do you make landscape images taller?
This line of code in the article creates an aspect ratio of 16:9:
padding-top: 56.25%;
Note: 9 divided by 16 = 0.5625
You can change the percentage to achieve any desired aspect ratio. For example, if you want a 4:3 aspect ratio, then you would use (3 divided by 4 = 0.75):
padding-top: 75%;
Worked perfectly – the only thing I would like to do now, is reduce the space between the images. Any tips for this?
Stacie,
The easiest way to adjust the spacing between the images is modify the Row settings under the Design tab > Sizing. Turn on the Use Custom Gutter Width option and then adjust Gutter Width to your liking.