How To Change Divi Featured Image Size For Your Blog

Divi comes with tons of features but unfortunately, you cannot yet change the featured image sizes for your blog. In this tutorial, I will be covering 2 methods on how you can change the featured image size for Divi.

The 2 methods I will be covering in this tutorial:

• Method 1: Use CSS to change the aspect ratio of the featured images
• Method 2: Stop Divi from cropping featured images

The first method is great if you have a ton of blog posts. You only have to add a CSS class and a snippet and you’re done.

For the second method, we are disabling the automatic cropping in Divi. You will need to crop them yourself however this will give you a bit more control over the outcome of the featured image

Method 1: Use CSS to change the aspect ratio of the featured images

When you upload a featured image Divi use an aspect ratio of 16/10 for this image. We are going to change this aspect ratio with CSS. I have created CSS snippets for the most commonly used aspect ratios:

• 1/1 (square)
• 3/2 (landscape)
• 4/3 (landscape)
• 16/9 (landscape)

For portrait sizes, I recommend doing the second method. That will work better because these images are getting cropped for landscape.

1/1 square

Open the Blog module and go to the Advanced tab. Place in the CSS field the class mh-blog-1-1.

Then go to Divi > Theme Options > CSS and place the following snippet:

.mh-blog-1-1 .entry-featured-image-url {
  padding-top: 100%;
}

.mh-blog-1-1 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  bottom: 0;
  object-fit: cover;
}

3/2 landscape

Open the Blog module and go to the Advanced tab. Place in the CSS field the class mh-blog-3-2.

Then go to Divi > Theme Options > CSS and place the following snippet:

.mh-blog-3-2 .entry-featured-image-url {
  padding-top: 66.66%;
}

.mh-blog-3-2 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  bottom: 0;
  object-fit: cover;
}

4/3 landscape

Open the Blog module and go to the Advanced tab. Place in the CSS field the class mh-blog-4-3.

Then go to Divi > Theme Options > CSS and place the following snippet:

.mh-blog-4-3 .entry-featured-image-url {
  padding-top: 75%;
}

.mh-blog-4-3 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  bottom: 0;
  object-fit: cover;
}

16/9 landscape

Open the Blog module and go to the Advanced tab. Place in the CSS field the class mh-blog-16-9.

Then go to Divi > Theme Options > CSS and place the following snippet:

.mh-blog-16-9 .entry-featured-image-url {
  padding-top: 56.25%;
}

.mh-blog-16-9 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  bottom: 0;
  object-fit: cover;
}

Method 2: Stop Divi From Cropping Featured Images

When you upload a featured image for your post, Divi will automatically crop it. This way all of the featured images will have the same size for your blog page.

With this method, we are going to disable the automatic cropping for featured images.

You need to add the following code to your child themes function.php file.

function wpc_remove_height_cropping($height) {
	return '9999';
}
function wpc_remove_width_cropping($width) {
	return '9999';
}

add_filter( 'et_pb_blog_image_height', 'wpc_remove_height_cropping' );
add_filter( 'et_pb_blog_image_width', 'wpc_remove_width_cropping' );

Note: All the featured images need to have the same aspect ratio, otherwise they do not look the same.

You can just make all of your featured images the same size for example 1200×800. If you do this then they will all have the same aspect ratio.

But maybe you have a featured image that is 500px in width. Then you need to crop this image in an editing tool like Photoshop before uploading it.

To calculate the height of this image so it will have the same aspect ratio you can use a tool like this one Aspect Ratio Calculator. Fill in your image size in the first column w1 and h1 and then fill in the width you have for your image in the second column w2 and the height will be calculated.

You Might Also Like…

• Best Divi Image Sizes for Your Website
• How To Change The Divi Gallery Thumbnail Size