Use Any Image Size or Shape In The Divi Portfolio Module!
Change Divi Portfolio Images to Square or Any Other Proportion
We have already published two other tutorials in our “change image aspect ration” series, and there is one more to follow after this. In this tutorial, we will be using the same math, same code, and the same process as before to change the Divi Portfolio Module and Divi Filterable Portfolio Module image aspect ratio. You can do this by a snippet of CSS code to your Divi website. Be sure to follow along the video to help you understand it, but it is pretty easy!
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 portfolio use the original uploaded image aspect ratio instead.
Explanation & Calculations
How To Force 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 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 Portfolio Module or the Divi Filterable Portfolio Module so that it can change to the desired aspect ratio. In this tutorial, I kept it very simple! (Just take out the period at the beginning.)
As usual, you can copy and paste these CSS snippets into the Divi>Theme Options>Custom CSS box.
Square 1:1
/*porfolio image aspect ratio square 1:1*/
.pa-portfolio-image-1-1 .et_portfolio_image {
padding-top: 100%;
display: block;
}
.pa-portfolio-image-1-1 .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 16:9
/*portfolio image aspect ratio landscape 16:9*/
.pa-portfolio-image-16-9 .et_portfolio_image {
padding-top: 56.25%;
display: block;
}
.pa-portfolio-image-16-9 .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 4:3
/*portfolio image aspect ratio landscape 4:3*/
.pa-portfolio-image-4-3 .et_portfolio_image {
padding-top: 75%;
display: block;
}
.pa-portfolio-image-4-3 .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 3:2
/*portfolio image aspect ratio landscape 3:2*/
.pa-portfolio-image-3-2 .et_portfolio_image {
padding-top: 66.66%;
display: block;
}
.pa-portfolio-image-3-2 .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 9:16
/*portfolio image aspect ratio portrait 9:16*/
.pa-portfolio-image-9-16 .et_portfolio_image {
padding-top: 177.77%;
display: block;
}
.pa-portfolio-image-9-16 .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 3:4
/*portfolio image aspect ratio portrait 3:4*/
.pa-portfolio-image-3-4 .et_portfolio_image {
padding-top: 133.33%;
display: block;
}
.pa-portfolio-image-3-4 .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 2:3
/*portfolio image aspect ratio portrait 2:3*/
.pa-portfolio-image-2-3 .et_portfolio_image {
padding-top: 150%;
display: block;
}
.pa-portfolio-image-2-3 .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
HI, Nelson. Just want to add my $0.02 here, we are using images that are already square for the projects in a full-width portfolio and using the full-width portfolio on a page in carousel mode, and of course the images were stretched horizontally by default and looked awful. I was able to use your CSS as a guide, but could not get it to work fully. What I finally ended up with was this: .et_pb_portfolio_image.landscape { width: 80%; margin-left: auto; margin-right: auto; } Using 80% was the only thing I could do to get the images to be square, but… Read more »
Hi Gil,
You said you are using the Fullwidth Portfolio. My tutorial is for the Portfolio and Filterable Portfolio. I personally dislike anything with the name “Fullwidth” because they are outdated and lack essential features, and now with the sizing options in the regular modules they are essentially depreciated. But yes, if someone wants to use that, this will help.
Got it. Unfortunately there is no carousel option for the portfolio unless you use the fullwidth version ;-(
Oh okay, well I’m glad you figured out how to get this this retrofitted. Someday I’ll have to look at that Module closer.
Thanks so much, Nelson – it worked perfectly!
That’s great, Reed! Sounds good!
Hi Nelson!
I love your tutorials! And this was just what I was looking for.
I am creating a section with magazines so I am using the ratio 2: 3 so that they can see my projects as magazines in 4 columns. But when I apply the CSS in the filterable portfolio, the images expand and become very large and the image is completely cut off. What I can do?
Thank you
Hi Facundo,
I’m not sure what you mean, this method works great. Can you share the link and any details about what you are doing to achieve this?
The changing of ratio worked, but the images placed seem to not
snap to fit. Is there something else to be added to force the photos to show as much of the image as possible while staying within the frame of the new sized ratio?
Hi Chad,
I think you mean it still isn’t totally uncropped, and for that you will need to see the other tutorial that is linked: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
Hi Nelson, Im trying to force the aspect ratio to the DIVI shop page product thumbnails however, the code always returns an ‘Expected RBRACE’ error after .pa-portfolio-image-16-9 .et_portfolio_image {
And an Unexpected token just after the final RBRACE itself.
Any help would be much appreciated thanks
Hi Terry,
This code would need to be modified to work for product images. You would need to target those and change out the .et_portfolio_image. Not sure why your code isn’t working though, if you are putting it in Divi Theme Options.
Hi, I have tired this however the CSS box isn’t one box but has various sections – so I went for the ‘portfolio image’ section. However it doesn’t work and after line 3 red text saying EXPECTED RBRACE, and after line 17 UNEXPECTED TOKEN (}).
I have no coding experience! Please could you help?
Thanks
Hi Laura, that is because you are putting in the wrong location. Place this snippet in Divi Theme Options Custom CSS and it will work! 🙂
Hi Nelson, your css worked perfectly for my portfoglioimages. I wanted them square so that was great. Now I just see them a bit big. Could that be solved by some more css. I just want them about 30% smaller. How do I do that?
Hi Annie,
When you say smaller…like add more margin around all four sides? Or zoom in?