Code by Day | Explore By Weekend

How to change the Divi blog module image size aspect ratio tutorial by Pee-Aye Creative.png

How To Change the Divi Blog Image Aspect Ratio – Make Featured Images Square or Any Size

In this tutorial, I'm going to share some handy CSS snippets to change the Divi blog module featured image aspect ratio. This will be fun!

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.

how to change the Divi blog module image aspect ratio
change the Divi blog image aspect ratio square
/*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;
}
change the Divi blog image aspect ratio 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;
}
change the Divi blog image aspect ratio 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;
}
change the Divi blog image aspect ratio 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;
}
change the Divi blog image aspect ratio 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;
}
change the Divi blog image aspect ratio 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;
}
change the Divi blog image aspect ratio 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;
}
28
Last updated Jan 3, 2021 @ 1:33 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
22 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nick
10 months ago

Hi great tutorial will this work with Divi Extra category layouts. Thank you. Best

Anneska van der Spoel
Anneska van der Spoel
9 months ago

Any way to combine portrait and landscape feature images and have a masonry grid?

lucie
8 months ago

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?

Marcus
Marcus
8 months ago

This only works for me when the blog is set to “fullwith” and does not work while I’m using “grid”.

Jessica Saigeon
Jessica Saigeon
8 months ago

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?

James Carter
8 months ago

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;
}

Rickard
Rickard
8 months ago

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 »

John Warnock
John Warnock
7 months ago

Thanks for the tips, worked perfect.

elizabeth england
elizabeth england
7 months ago

Thank you – this will save a heap of time cropping images

Juli
Juli
5 months ago

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!

Corine Pettit
Corine Pettit
5 months ago

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.

CARLOS CONTRERAS
CARLOS CONTRERAS
3 months ago

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.

Screen Shot 2020-10-14 at 11.24.31.png

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart