This Is Going To Be Fun One!
Math + CSS + Photography = Fun! 🙂
When I was designing my Divi Paving Child Theme, I needed three images to be the same proportion no matter what size the end user uploaded, since they may not be as familiar with how to adjust that in Photoshop. So I thought I’d share with all my great Divi friends how to do this too!
Explanation & Calculations
How To Force Change Divi Image Aspect Ratios
Most of us are familiar with image or video aspect ratios. Lots of times our devices are made to these proportions as well. The first number in the ratio is the width, and the second number is the height. As you can see in the CSS examples below, the CSS trick works with padding and uses a percentage. Basically, the percentage is the height divided by width. To calculate what percentage to use in the CSS for the Divi image aspect ratios, just use this math formula.
- Divide the second number by the first number
- Move the decimal over two places to the right
- Add a percent sign
Square 1:1 – 1 / 1 = 1.00 = 100%
Landscape 16:9 – 9 / 16 = 0.5625 = 56.25%
Landscape 4:3 – 3 / 4 = 0.75 = 75%
Landscape 3:2 – 2 / 3 = 0.6667 = 66.67%
Portrait 9:16 – 16 /9 = 1.7778 = 177.78%
Portrait 3:4 – 4 / 3 = 1.3334 = 133.34%
Portrait 2:3 – 3 / 2 = 1.5 = 150%
Now you can use this formular for other sizes as well!
Examples & CSS Snippets
NOTE: Always be sure to add the correct class to the image module for your desired aspect ratio. In this tutorial, I kept it very simple! 🙂 (Just take out the dot at the beginning.)
As usual, you can copy and paste these CSS snippets into the Divi>Theme Options>Custom CSS box.
Square 1:1
/*image aspect ratio square 1:1*/
.pa-image-1-1 .et_pb_image_wrap {
padding-top: 100%;
display: block;
}
.pa-image-1-1 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 16:9
/*image aspect ratio landscape 16:9*/
.pa-image-16-9 .et_pb_image_wrap {
padding-top: 56.25%;
display: block;
}
.pa-image-16-9 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 4:3
/*image aspect ratio landscape 4:3*/
.pa-image-4-3 .et_pb_image_wrap {
padding-top: 75%;
display: block;
}
.pa-image-4-3 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 3:2
/*image aspect ratio landscape 3:2*/
.pa-image-3-2 .et_pb_image_wrap {
padding-top: 66.66%;
display: block;
}
.pa-image-3-2 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 9:16
/*image aspect ratio landscape 9:16*/
.pa-image-9-16 .et_pb_image_wrap {
padding-top: 177.77%;
display: block;
}
.pa-image-9-16 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 3:4
/*image aspect ratio landscape 3:4*/
.pa-image-3-4 .et_pb_image_wrap {
padding-top: 133.33%;
display: block;
}
.pa-image-3-4 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 2:3
/*image aspect ratio landscape 2:3*/
.pa-image-2-3 .et_pb_image_wrap {
padding-top: 150%;
display: block;
}
.pa-image-2-3 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Like these photos?
Join us on Instagram!
Those images were all taken by myself in Pennsylvania. If you happen to like that sort of thing, follow my Instagram pages for more photos!
Awesome tutorial/snippets! Thanks a lot!
You’re welcome, Elisandro! I’m glad you like it and hope you find it useful in your projects! 🙂
You bet, Nelson! Unique resource! 🙂
Thanks for this –
But I am finding that this does not work all I get is very very thin images? am I missing something?
Hi there, please share a link so I can try to see why it isn’t working for you. I’ve tested and used this many times, so I know it should work 🙂
Follow-up to my earlier message: I see now that I missed that the code is for the image module. I actually need to do this for the blog module. What changes would I make?
Hi Tim,
This same solution works for other modules, but the thing that needs changed is the css class that it is targeting. So for the blog module, use a.entry-featured-image-url instead of .et_pb_image_wrap
Thanks for the tip!! I am trying for a text module (so that I can then apply a text/image hover affect). What would I use instead? Thank you 🙂
Hi Kat,
Check out this tutorial: https://www.peeayecreative.com/add-button-text-centered-over-image-divi/
Hi again! Thanks for the quick response. I saw that tutorial but it is not what I am after because I do not want the text to be there permanently. I would like the image to be displayed and then on hover have a gradient with text displaying overtop explaining what it is (this is for my portfolio). All images need to be square. The projects/galleries divi modules are not flexible enough – fixed columns + image sizes and no text option for hover. Sooo I wanted to try your 1:1 code in a text module (cause I have figured… Read more »
Hi Katrina,
In that case, just apply the code from the other tutorial on hover! So in the CSS snippet add :hover before the first {
Hi, now en english 😉
Very interesting. My question is … is there a way to combine vertical and horizontal images in the same gallery and that the thumbnails come out horizontal (for horizontal and vertical images (for vertical images. My problem is that, any layout option I choose cuts out the thumbnails. If I have combined images, I hope you understand, thanks.
Hi Nicolás,
I think I understand, you are thinking more of a grid of images that is like Pinterest where no matter what size they all stack? I will look into that for sure! Keep an eye on the blog!
Dear,
I was very glad to see your solution. In a certain way it helped me out! So thanks!
But the case is that my photo’s are all zoomed in right now.
I cut them in the right aspect ratio in photoshop but still it doesn’t work.
See the link below:
https://handirkx.com/original-artworks/
In future it have to work without photoshop aswel.
Thanking you in advance.
Hi Hendrik,
Please double check your code, the point of this tutorial is to NOT use Photoshop. It certainly does work, as you can see in the live examples.
Hi, trying to use this for the blurb module but my css isn’t taking – modified selector is e.g .pa-image-1-1 .et_pb_main_blurb_image (Iguessing this is wrong?)
Hey Gavin,
The blurb image is a bit different because of the way 100% height makes the image fill the entire blurb div. I was trying to hack it, but there is no good way to do it. However, now that we have column design options, there’s rarely a use case where you can’t use an image and a text module instead of a blurb.
I see. Thanks very much – loving your tutorials, site and approach, keep it up! 😊
I’m so glad, Gavin! Thanks for those kind words, and do let me know if you have ideas and suggestions for hacks and tutorials 🙂
Great!
Thank you, glad you like it!
Unfortunately I can’t get this to work.
You tell us to put the ‘snippet’ in the Custom CSS box, but there are THREE Custom CSS boxes: Before, Main Element, and After.
should we be putting parts of the code you gave us into more than one of these boxes? Or all into one box? WHICH ONE(s)?
Hi Jim,
Here’s what it says “As usual, you can copy and paste these CSS snippets into the Divi>Theme Options>Custom CSS box.” You need to go to your Dashboard, then click Divi, then click Theme Options, scroll down, and the custom css box there is where you put the CSS for any tutorial we have.
Thanks for this – this is working as long as I know the aspect ratio I need in advance; however, what if I don’t know the aspect ratio that is needed because the height of the element might change while the width does not? \
For instance, if I have a row where I set “Equalize Column Heights” to yes and the tallest column is a text column, how can I make sure that my image in another column actually fills the entire column height and width, even if the height of the text should change?
Hi Lance,
I think I understand what you are asking, but this is different than the tutorial. You could try setting the min-height for the image to 100%, then set the overflow (advanced tab>Visibility toggle) to hidden. Or you could try just putting the image as the background of the column, and it will do exactly what you describe (just add a divider module to keep some height in the column).
Thanks, Nelson. Yes, I realized that this was different from the tutorial, but your tutorial is the closest thing I have found to anyone explaining how to do what I was trying to do, so thought I’d ask, anyhow. As it happens, I played around and ended up deciding that making the image a background image for the column was the best way. Thanks for the reply, and for your tutorial series.
thanks however it didn’t work. As I paste the code, I get some errors in red and nothing happens to the image. I tried a few times but keep getting the same.
As I noted before, the errors are not real errors. Divi simply does not know the CSS. The CSS is perfectly valid and works even if the Divi Builder things otherwise 🙂
hello excellent your tutorials I would like to know how you put wpdiscuz in a single column thanks
Hi Cristian, what do you mean by a single column?
Hello if you look for example here https://www.dondemiveterinario.com/cuidadoybienestargatos/como-saber-si-mi-gata-esta-embarazada/. I want the comment box not to be full width if not in the row where the text is.
Hello Nelson… will this css id work on the image inside a blurb module… as the blurb height becomes same but the image height does not.. thanks
No it would not work for a blurb. You could adapt it by changing the CSS class to target the blurb image, that could work!
Beautiful! You helped me soo much!! thanks a lot!
You’re welcome Elena!
Hi Nelson, Thank you for the passion of teaching and sharing your knowledge. I have a square image which I placed in my gallery module. 3 of them fit in a row inside the module.
problem: the aspect ratio is not 1:1 the height is full but the width are cropped.
I posted pa-image-1-1 in the gallery module CSS Class field. And the rest of the code to the page settings advanced > CSS field
It didn’t work. Please help.
Hi Tim,
First of all, you are saying “gallery” but this post is not about the gallery. This one here is for the gallery: https://www.peeayecreative.com/change-the-divi-gallery-image-aspect-ratio/
Secondly, if the image is not square (which is why you would be using this) then something has to be cropped, whether that is the height or width.
Try using the gallery code and then let me now if I am not understanding something.
Hi Nelson,
Thank you for responding. My images are square but the thumbnails only shows 80% of the image starting from the center.
I will study the link you provided. Try it and let you know.
Thanks.
Hi,
it seems it’s not working on my website.
I found a solution for the portfolio but not for the gallery. Thanks for any help! 🙂
Hi Claralinda,
You can always check out the alternative post here: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
Hi Love this Tutorial thank you. I noticed that it will not work on the blog templates in divi. For example I have featured image that will changes to different sizes but when i apply the ratios it ignores them. I placed the code in both template and page layouts? Any thoughts
Hi Rudy,
This code would only work in the Divi Blog module because that is the code it is targeting. It would not affect images on the actual blog posts.
Wonderful explained, thank you so much.
Just tried to ‘combine’ your code within a media query to get a square ratio, but the images diesappears then, see here: http://modefolles.de/wordpress/ the bw portrait image. do you see a possibility to combine? this is the code I used:
@media all and (max-width:768px){
.et_pb_image_wrap {
padding-top: 100%;
display: block;
}
.et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
}
Hi Michael,
Adding a media query would not make it disappear. There must be something else going on, some other factor.
Thanks a lot for your awesome materials.
I’ve try this tricks with tall image 1000*1500 but unfortunately doesn’t work.
Please if you’ve any suggestion let me know it
my regards.
Hi Amine,
What have you done exactly? Can you share a link and explanation of what steps you have tried?