Use Any Image Size or Shape In The Divi Blog Module!
Change Divi Blog Images to Square or Any Other Proportion
Welcome to our fourth and final (we think) tutorial in our “change image aspect ratio” series. Today, we will be using the same math, same code, and the same process as before to change the Divi Blog Module featured 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 easily understand how this works!
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 blog use the original uploaded image aspect ratio instead.
Explanation & Calculations
How To Force Divi Blog 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 Blog Module featured 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 formula for other sizes as well!
Examples & CSS Snippets
NOTE: Always be sure to add the correct class to the Divi Blog 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

/*blog image aspect ratio square 1:1*/
.pa-blog-image-1-1 .entry-featured-image-url {
padding-top: 100%;
display: block;
}
.pa-blog-image-1-1 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Landscape 16:9

/*blog image aspect ratio landscape 16:9*/
.pa-blog-image-16-9 .entry-featured-image-url {
padding-top: 56.25%;
display: block;
}
.pa-blog-image-16-9 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Landscape 4:3

/*blog image aspect ratio landscape 4:3*/
.pa-blog-image-4-3 .entry-featured-image-url {
padding-top: 75%;
display: block;
}
.pa-blog-image-4-3 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Landscape 3:2

/*blog image aspect ratio landscape 3:2*/
.pa-blog-image-3-2 .entry-featured-image-url {
padding-top: 66.66%;
display: block;
}
.pa-blog-image-3-2 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Portrait 9:16

/*blog image aspect ratio portrait 9:16*/
.pa-blog-image-9-16 .entry-featured-image-url {
padding-top: 177.77%;
display: block;
}
.pa-blog-image-9-16 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Portrait 3:4

/*blog image aspect ratio portrait 3:4*/
.pa-blog-image-3-4 .entry-featured-image-url {
padding-top: 133.33%;
display: block;
}
.pa-blog-image-3-4 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Portrait 2:3

/*blog image aspect ratio portrait 2:3*/
.pa-blog-image-2-3 .entry-featured-image-url {
padding-top: 150%;
display: block;
}
.pa-blog-image-2-3 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Hi great tutorial will this work with Divi Extra category layouts. Thank you. Best
Hi Nick, glad you like it! This concept would work anywhere, yes. You just have to find the CSS classes of the image and the image container and replace those in the snippet.
Any way to combine portrait and landscape feature images and have a masonry grid?
Sure, if you use our other tutorial they will appear in their original aspect ratio: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
This is awesome, but it’s not quite solved my issue.
In each post the featured image is square, they’re like profile images, and in the blog module, currently the tops of their heads are getting clipped off.
I hoped that making the blog image module square would solve this issue, but it’s just croppped the actual blog image module, so although the image is square, I stll have the same issue.
Is there an option to use the complete sqaure image from the post, instead of just cropping the blog module image?
Hi Lucie,
Yes, we have a different tutorial linked in this one for that situation: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
This only works for me when the blog is set to “fullwith” and does not work while I’m using “grid”.
Hey Marcus,
Not sure why you are saying that. Not true. Care to elaborate?
So this worked great for me and i love the way it looks, BUT… im using the 3:2 ratio, and i uploaded a portrait style photo as the blog post preview image, but the image is really zoomed in and cropped, even though it would fit totally fine normally.. do you know how to fix this?
Hi Jessica,
Do you mean you uploaded the same ration image as what you are trying with the code? In that case, the tutorial we have linked in the one above would be better suited for your situation.
Awesome, super helpful for equalizing the ratio when you have a mixture of video and text articles pulling into a blog feed. Used the Landscape 16:9 option and it lined up almost perfectly. As the videos are fluid iframes I utilized the following code:
/* Blog Page */
/* Article */
.your-chosen-class .entry-featured-image-url {
padding-top: 56.25%;
display: block;
}
.your-chosen-class .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/* Video */
.your-chosen-class .fluid-width-video-wrapper {
padding-top: 56.25% !important;
display: block;
}
Thanks for sharing, James!
I appreciate the attempt. Yes, it’s a simple fix. But what is it really…? Lets say I would upload a square image for my featured image. Divi would first crop it to the custom size 400×250. What we then do with this “fix” to make it square again is hiding the overflowing part. So what we are left with is 250×250. Instead of the already square image we uploaded we now are left with only 62.5% of the original width and 62.5% of the original height. Instead of not cropping it at all, since it’s already square, we have now… Read more »
Hi Rickard,
I’m not sure what your point is, but I don’t make Divi, I make solutions for it. Be sure to check the other tutorial that is linked to uncrop the photos to the original aspect ration you upload it at.
Thanks for the tips, worked perfect.
You’re welcome, John!
Thank you – this will save a heap of time cropping images
You’re welcome Elizabeth, you are absolutely right about that! 🙂
Hello! Thank you so much for this helpful tutorial. I did this and followed instructions, however, when I changed the aspect ratios, all my images got super pixelated and all image quality was lost. I even tried replacing the featured images with square aspect ratios to see if that would help and still got pixelated images.
Is there any way to fix the aspect ratios without ruining the quality of my photos? Thanks!
Hi Juli,
I’m not sure but that is not normal, so I don’t know what to say as this does not affect the images unless they would be majorly zoomed in. You could try the other tutorial: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
Hey Nelson! This is exactly what I’ve been looking for! Thanks!!
One small issue I seem to be having though – should this code result in a cropped image? That’s what I want, but mine seems to be smushing the image into the assigned aspect ratio and distorting the photo, instead of cropping it.
Hey, Nelson, great tutorial.
For me it’s only working with Blog Module set to Fullwidth too (as posted by Marcus a while ago). As I’m trying to achieve a Widget Recent Posts (square image left) look, I’ll add some additional CSS to make it like the attached screen capture.
I’ll share the result and the snippet when I’m done.