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!
▶️ Please watch the video above to get all the exciting details! 👆
NOTE: You might want to also check out a similar but very different tutorial called How To Stop Divi Image Crop. That one actually 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.)
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
/*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;
}
Haha! I knew if I looked long enough through your notes I’d find what I was looking for. I still say you should incorporate all of these style settings into one Ultimate Divi Blog Module (you can have the name if it’s not already being used… 😉 ) Thank you for taking the time to publish these blog articles for us!
John F.
This tutorial has saved my bacon a couple of times! I will never know why Divi doesn’t include these options in the blog module, but this post is extremely beneficial. Thank you!