Use Any Image Size or Shape!
Change Divi Gallery Images to Square or Any Other Proportion
Everyone seems to love our other post on changing the image aspect ratio of Divi images, but that tutorial only shows how to do it on the Image Module. In this tutorial, we will be using the same math, same code, and the same process to change the Divi Gallery image aspect ratio using the Divi Gallery Module. You can soon be adding any combination of landscape, portrait, or odd sizes images to the gallery and they will automatically become uniform.
NOTE: You might want to also check out a similar but very different tutorial called How To Stop Divi Image Crop. That one actuallyy make the gallery use the original uploaded image aspect ratio instead.
Explanation & Calculations
How To Force Divi Gallery 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 gallery item 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 formula for other sizes as well!
Examples & CSS Snippets
NOTE: Always be sure to add the correct class to the Divi Image Gallery Module so that it can change to the desired aspect ratio. In this tutorial, I kept it very simple! (Just take out the dot at the beginning.)
Where To Add The Code Snippets
If you are using our free Divi child theme, place the snippet into the style.css file. Otherwise, place it in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
Square 1:1
/*image gallery item aspect ratio square 1:1*/
.pa-image-gallery-1-1 .et_pb_gallery_image {
padding-top: 100%;
display: block;
}
.pa-image-gallery-1-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 16:9
/*image gallery item aspect ratio landscape 16:9*/
.pa-image-gallery-16-9 .et_pb_gallery_image {
padding-top: 56.25%;
display: block;
}
.pa-image-gallery-16-9 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 4:3
/*image gallery item aspect ratio landscape 4:3*/
.pa-image-gallery-4-3 .et_pb_gallery_image {
padding-top: 75%;
display: block;
}
.pa-image-gallery-4-3 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 3:2
/*image gallery item aspect ratio landscape 4:3*/
.pa-image-gallery-3-2 .et_pb_gallery_image {
padding-top: 66.66%;
display: block;
}
.pa-image-gallery-3-2 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 9:16
/*image gallery item aspect ratio portrait 9:16*/
.pa-image-gallery-9-16 .et_pb_gallery_image {
padding-top: 177.77%;
display: block;
}
.pa-image-gallery-9-16 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 3:4
/*image gallery item aspect ratio portrait 3:4*/
.pa-image-gallery-3-4 .et_pb_gallery_image {
padding-top: 133.33%;
display: block;
}
.pa-image-gallery-3-4 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 2:3
/*image gallery tiem aspect ratio portrait 2:3*/
.pa-image-gallery-2-3 .et_pb_gallery_image {
padding-top: 150%;
display: block;
}
.pa-image-gallery-2-3 .et_pb_gallery_item 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!
there is no logical reason why “padding-top” works for that…but it does I guess…very weird, but thank you! Somebody is a CSS master!
Hi Donna,
Haha, I agree it seems odd, but it actually does make sense if you go deep into the logic of the heights and widths.
That’s a little bit of awesome right there!
Trying to do this with the Fullwidth Portfolio with the Square 1-1 Option. What do I need to add to the 1-1 CSS to fix?
Thanks for any help you can addd here!
Hey Paul, I do have another tutorial for the Portfolio and Filterable Portfolio, so you can try those. https://www.peeayecreative.com/change-the-divi-portfolio-image-aspect-ratio/
However, I do not use nor do I recommend using the Fullwidth Portfolio (or any “fullwidth” modules) because they are not up to date and are very awkward to customize. I suggest using a regular Portfolio and making the row fullwidth instead.
Hi, Im getting “expected RBRACE” shown below. THANKS!
.pa-image-gallery-1-1 .et_pb_gallery_image {
EXPECTED RBRACE
padding-top: 100%;
display: block;
Hi Doug,
You are missing the curly brace } at the end. Give that a try and let me know how it goes!
You fixed my issue with the different thumbnails sizes. Thanks!
Hi Juan,
So glad for that! You are welcome! 🙂
Hi There, When I add this into the Main Element box under Custom CSS of my Divi Gallery Module, I get EXPECTED colon between lines 2 & 3 and well as UNEXPECTED token “}” at the end. Here is what I am pasting (and removing the . at begining): /*image gallery item aspect ratio square 1:1*/ pa-image-gallery-1-1 .et_pb_gallery_image { padding-top: 100%; display: block; } pa-image-gallery-1-1 .et_pb_gallery_item img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; } Am I putting it in the wrong box? Which . do I remove? I’d really… Read more »
Hi Laurie,
You need the . at the beginning. You only need to remove the period in the Divi module when you paste just the class there, like “pa-image-1-1”
Bro, this Gallery module was killing me! But then I found your Tutorial.
THANK’S mate!!! Solved all my problems.
Hi Jan, I’m so glad you found it! We have lots of fun solving problems here as you can see! 🙂
Hi, thanks for sharing this code. I am having the same issue as some of the others.
I paste the code and double checked it. this is what my main element in divi shows once I do. It throws in Expected RBRACE and Unexpected Token ‘ } ‘/
/*image gallery item aspect ratio square 1:1*/
.pa-image-gallery-1-1 .et_pb_gallery_image {
padding-top: 100%;
“Expected RBRACE.”
display: block;
}
.pa-image-gallery-1-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Unexpected Token ‘ } ‘.
Hi Benjamin,
You can’t place CSS like this in the module. You need to add the class “pa-image-gallery-1-1” to the module, then add the CSS snippet in Theme Options.
Hey there,
I’ve read all the previous comments and I’m still having issues.
I pasted the class in the module and the CSS snippet under Theme Options. But nothing changes in the module. What could be going wrong? I checked to make sure I have brackets and dots in the right places.
Hi there, if you share the link we can take a look!
Hi Nelson,
Thanks for the code I’m finding it very useful.
I am having a bit of trouble with it though.
My images are square to begin with – but for some reason your code is not showing the whole image. It is showing square- but missing around 10% from around all edges of the image. I really would love to show the whole image.
Any help greatly appreciated.
Thanks
Eoin
Hey Eoin,
In that case you shouldn’t be using this tutorial, if they are already square. You can check out this other one here: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
Great tutorial and thanks for the help. Anyone having any weird stuttering/lagging/freezing on Chrome when implementing the “object-fit: cover” line specifically? It seems to be the cover attribute messing stuff up… contain causes no issues but doesn’t achieve the desired result. I have tried it on Edge as well, where things seem to behave normally…
I have tried this on a friends site and it works perfect using the blog module on any given page but when viewing the actual blog entry the image overlay is overflows upwards leaving the bottom of the image without overlay 🙁 Is there a fix for this please??
Hi Giggs,
I’m not sure what you mean by the actual blog entry. Can you explain that and give me a url?
Hey Thanks for your fast answer.
This is the main page where I am using the blog module to show blog entries: https://chuspazos.com/ and this is a single blog entry: https://chuspazos.com/the-manueles-nuevo-disco/ where the image overlay is shown wrong.
Hi Giggs,
First of all, I was really confused because this tutorial is about a gallery and you keep saying blog.
The issue is unrelated to my post, you have some custom css there doing this: #left-area .hentry img:not(.wp-smiley) {
margin-top: 20px;
}
Well you are right, many thanks for your help!!
Hi! thanks for the code snippets! They are great! I’m having some trouble with getting it to work. I added the following to my theme editor:
/*image gallery item aspect ratio square 1:1*/
.pa-image-gallery-1-1 .et_pb_gallery_image {
padding-top: 100%;
display: block;
}
.pa-image-gallery-1-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
and then this to the CSS ID & Classes in my gallery settings:
pa-image-gallery-1-1
But somehow my gallery is still showing all kinds of different aspect ratios. Am I doing something wrong?
It looks good to me. Can you share the link? Be sure to clear the cache as well!
Clearing the cache worked! So dumb of me to forget haha
That’s great, we all forget that!
Hi Nelson, thanks for this very helpful and perfect explanation. A good way to show the gallery images nice and clean. But my biggest concern, and I did not found any solution for it with divi, is the resizing of images – means, any gallery image is loaded in it’s full size and resized via css. This method ends up in a really bad performance rating regarding loading time measured by GTMetrix or Google Page Speed – especially when Galleries like Photographers Portfolios contains a lot of images. The recommendation is “Serve scaled images”! Sorry, my question is a bit… Read more »
Hi Marco,
Very good question. I’m not an expert at that, but I’d love to know more myself. I know that SRCset is part of that, and Divi has that now, but it is more to it than that. I’ll see if I can get an answer for this and if I do I’ll be sure to share it on the blog.
Yesterday I spent an unnecessary amount of time trying to surf the internet looking for this. Your blog post was EXACTLY what I was looking for. It was short, to the point and you had the code snippet right there with screenshots. Some of these blogs wax poetic with the whole back story…I just wish they’d get to the point like you did. I will say, however, I had the same error message as others, but saw your response to someone else clarifying to put the code snippet in the Theme Settings, not in the module. I mean, you said… Read more »
I’m so glad you found our site, Rick! I updated the post with our instructions about where to add code to make it clear as mud 🙂
Great tutorial! Did exactly what I wanted – but I have a further question! LOL
How can I set the focus for each image in its square? So need to be shifted right and down – others left and up…
https://lavenderpromotions.com/drag-events/
Is the page in question!
Thanks for looking!!!
Hi James, If I understand what you want to do, I don’t think it would be practical to try to do that, and I don’t know how you would.
Hi Nelson, is there a way to make the images varied through CSS? I’m currently trying to create a gallery for a client, but his images all come out in the wrong sizes or cropped. I added the link under the website link option. I tried fiddling around with the different examples here, but couldn’t get it to work properly, and I’m not confident enough to try and edit in the function.php like shown in your other tutorial.
(client’s old website to show proper size of his images: https://peterravn.com/work-2013-2/
My attempt at using the gallery module
http://katjsoeg.dk/petrravn2/ptrravnwp/wordpress/project/paintings-2018-2019 )
Hi Katja,
So to start, yes, that’s what our tutorial does. I noticed what could be the issue is you are using the “Fullwidth” gallery, do not use that at all, just use the regular Gallery module. Our tutorial would not work for the “fullwidth” ones as they are outdated. Depending on your needs you could also look at this tutorial: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
As far as I’m aware I am using the regular gallery module? Even then, I have no choice with it, as my client wants the slider function for the gallery module. Thank you for your help otherwise.