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.)
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSSÂ tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
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 then they were all shifted to the left so the carousel itself appeared to be off-center. Adding the “margin: auto”s centered the images and it looks pretty much like what we wanted.
Your CSS makes perfect sense to me and should have worked… It also seems the CSS selector has changed from .et_portfolio_image to .et_pb_portfolio_image.landscape. Anyway, just wanted to add this in case it helps anyone, and thanks for all these posts and videos, they are really helpful.
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.
I am using this in a regular and filterable portfolio modules and my images are already square. When I use this, it cuts the top of their heads off. Any idea why?
By default it crops, yes. I think you need my other post mentioned at the top: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
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?
Hi Nelson,
Thanks for the tutorial. Looks great.
How would you suggest editing the code to make the images opacity change on hover?
Cheers!
Fred.
Hi Fred,
You could start with this, very basic, just target the image and add the hover and opacity:
.et_pb_portfolio_grid .et_pb_portfolio_item img:hover {
opacity: .5;
}
The ratio of the shape/frame changes great – square. How do we make it work for photos. They seem to zoom in and are still cropped.I’d like to display the photos as squares but allowing the photo to fit perfectly. no cropping.
Hi Chad,
We have hundreds of tutorials, and have other tutorials for different modules related to this. You can check our blog page and use the search there to find them. Here is the relevant one: https://www.peeayecreative.com/how-to-change-crop-divi-image-aspect-ratios-in-the-builder/
Cool
But how about 16:10? can you write code?
Hi Alex,
Of course, you can use any ratio, you can just do the math which is explained in the guide 🙂
Hi Nelson!Thank you very much for the video! 🙂
I have designed the portfolio with three columns and at 3:4 with your tutorials!
But the images lose a bit of resolution. Is there any way to fix it?
Thanks 🙂 🙂
You can try our other tutorial: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
Hi Nelson, thank you so much for the tutorial, it worked great!
I’m trying to make it work for mobile and tablet view as well. Do you know how to do that in Divi? I’m new to Divi and not sure if I’m looking in the right place or if the code needs to be edited.
Hi Carina!
If you want a different properties for tablet and mobile, then you can add the code in media query @media all and (max-width: 980px)
Example:
@media all and (max-width: 980px){
.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;}
}
Let me know how it goes!
Hi!
I want to display book covers in my filterable portfolio, i.e. images with different widths and heights.
How do I display them in a grid where the height is set (300px for example), but the width is determined by the image width?
Hopefully, that was clear enough! 🙂
/Fredrik
I would recommend uploading them all the same aspect ratio, otherwise there would be no way to make these adjust per image.