Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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!

▶️ 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.

How To Stop Image Crop In The Divi Blog Portfolio Gallery Modules Tutorial by Pee Aye Creative
change the Divi blog image aspect ratio square

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.

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 square
/*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 square
/*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 square
/*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 square
/*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 square
/*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 square
/*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;
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

88 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. John Farrell <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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.

    Reply
  2. Spencer Taylor <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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!

    Reply

Comments By Others

  1. Steve Gardner

    Everything worked as intended, however, I would like to have the aspect ratio responsive (different aspect ratios for each device size) – is this possible?
    Keep up the (very) good work!

    Reply
    • Hemant Gaba

      Hi Steve!

      In that case, you need to add the whole code again for each devices using the media query.

      Reply
  2. Maudy

    Hi there, thank you for sharing! It seems to work, however; my images stay the smaller size while the rest of module blog items are getting larger (without the images getting to the 3:4 size. Any idea what I’m doing wrong?

    Reply
    • Hemant Gaba

      Hi Maudy!

      Can you please share the URL of the page to check further?

      Reply
  3. Jake

    Hi – thanks for sharing this tip. It helped. Curious if you might have any idea why my square featured image is getting cut off.
    https://client-sandbox.com/resources/#radio
    There should be approx another 20px all around.

    Reply
  4. Tamara Aertsen

    This was exactly what I was looking for, solved my problem immediately. Thank you for providing such useful content!

    Reply
  5. Katie Colormaiden

    Hi:

    I thought this worked but when I recreated my image as a square, it enlarges it in the Divi grid. Am I missing something? It works fine in my customized blog layout when the image is clicked but in the grid, it’s cutting off the image. You can see it here: https://calamitycocktails.com/blog. It’s the middle first row where I recreated the art as a square. Our aim is to not have to create multiple sizes of the same art.

    Reply
  6. Katie Colormaiden

    Thank you so much. My client wanted square images so as not to have to create a zillion versions for social etc. This is so helpful for us both.

    Reply
  7. Ali

    Hi Nelson! I’ve loved using this technique throughout my website. It’s helped me create a super personal and special site!! However, I’ve been using Page Speed Insights to test my website speed and one of the issues I’m having is with “properly sizing images.” The blog images that this website calls out are some that I’ve used these snippets for. Would these CSS snippets cause website lagging and be the cause of poor page speed? Or would this problem that Page Speed Insights highlighted be caused by something else?

    Thanks in advance!! 🙂

    Reply
  8. Andrew

    why doesn’t the video work anymore? When I click play it just does nothing or refreshes the page?

    Reply
  9. Martin

    This works on the default Divi Blog Module but does NOT work when using the Custom Divi Blog Module from this website. (Only the first image is shown 100% width over the full webpage covering all content).

    Reply
    • Hemant Gaba

      Hi Martin!

      Could you please share the URL where you are facing this issue for me to investigate further?

      Reply
    • Martin

      The weird thing is that if I add the Custom Divi Blog Module on the same page where the Default Blog Module is loaded, the problem goes away.

      It looks like the Custom Divi Blog Module plugin from this website is missing something that is loaded when the default Divi Blog Module is used.

      I’m guessing the Divi Blog Module got updated on the way and these changes are not reflected in the Custom Divi Blog Module. For example here is 1 difference I could find in a minute.

      ‘border_radii’ => ‘%%order_class%% .et_pb_post .entry-featured-image-url img, %%order_class%% .et_pb_post .et_pb_slides, %%order_class%% .et_pb_post .et_pb_video_overlay’,
      ‘border_styles’ => ‘%%order_class%% .et_pb_post .entry-featured-image-url img, %%order_class%% .et_pb_post .et_pb_slides, %%order_class%% .et_pb_post .et_pb_video_overlay’,

      vs

      ‘border_radii’ => ‘%%order_class%% .et_pb_post .entry-featured-image-url, %%order_class%% .et_pb_post .et_pb_slides, %%order_class%% .et_pb_post .et_pb_video_overlay’,
      ‘border_styles’ => ‘%%order_class%% .et_pb_post .entry-featured-image-url, %%order_class%% .et_pb_post .et_pb_slides, %%order_class%% .et_pb_post .et_pb_video_overlay’,

      Reply
  10. Alexan

    I need to pair the 3:4 code with the CSS class “pa-blog-list” for mobile only. I have multiple blog lists but this is the only one i want to crop the images on.

    Where / how would I include “pa-blog-list” in this code so that it only crops the desired blog images?

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

    Reply
      • Alexan

        I have a section of blogs with square images but that should only be in “the latest” section. The blog modules below that section are the images I’m trying to crop. On desktop, they show as squares (I don’t know why), but I’m wanting them to be 3:4 on mobile. On my end, on mobile, the first module that I tested this on is not cropped correctly to be 3:4. Are you seeing it on mobile?

      • Alexan

        I see the step I missed now, oh my gosh 🤦🏻‍♀️ I tested the code on one blog module and the image is cropped now, but not correctly. It’s extremely tall and very skinny (again, using the 3:4 code). I have no idea where I’m going wrong here! 😭 Including my URL so you can see what I mean!

  11. Mary Pope-Handy

    Hi Nelson,

    I love your blog and just subscribed!

    Yesterday I used another tutorial of yours to make my blog module 4 columns rather than three. Worked perfectly. Today I followed the instructions to make the photos in the blog module all the same size, and this time I got an error message. Are the two sets of code not compatible? I suspect it’s me doing something incorrectly, but wanted to double check.

    Thanks in advance!

    Mary

    Reply
    • Hemant Gaba

      Hi Mary Pope-Handy!

      Could you please share the URL where you are facing this issue for me to investigate further?

      Reply
  12. amany esmail

    hello
    I like your blog and video, I’ll ask a stupid question, I tried to put the code in css class but no change happened. had I put the words in pink and black or in black only? I try these days to study HTML and my plan to study CSS. but until that Ihave a problem, please put the code alone in square to be easier. thank you

    Reply
    • Hemant Gaba

      Hey Amany!

      Thank you very much! The pink part in the code is the custom Class. You need to add the whole code (pink + black). We will consider adding the code in more simpler way.

      Reply
  13. Ruben

    Dear Nelson,

    Since I would like to have the button centered of the image, I use the background as image instead. Your code doesn’t works for this purpose but perhaps you can also help me to get the “whole” post square instead of the image only.

    Kind regards.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Just be aware that using the background changes your SEO value to nothing for the image, since backgrounds are decorative. For that specific use case you may need to just crop the image before uploading.

      Reply
  14. Daniel

    It was very helpful for my blog, thnk you so much!

    Reply
  15. Vince

    Hi, I am using an image around 300x500px for 2:3 aspect ratio. The problem is, the output image seems to be zoomed out. Is there a way to make it appear to have the maximum image size?

    Another thing, when some of the titles are two to three lines, the next rows may not be of the same height anymore. I understand that you have a tutorial for that. How can we incorporate these two tutorials together? Meaning, we have the same height for every row, and we will have these new aspect ratio without zooming the featured image?

    Reply
  16. Alexan

    Your tutorials are a lifesaver!! Question–is it possible to combine this code with “pa-blog-list”? I am trying to force a square ratio with a row of three blog list modules but not sure how to combine. Thank you in advance!

    Reply
  17. Leon

    Hi Nelson,

    Great tutorial again, keep up the work! I really appreciate your always great videos.

    I tried to combine the styles of this blog with the blog text over image tutorial. I pasted both styles in the CSS and put both CSS classes in the blog module. It didn’t work. How to combine it? I would like to use the text over blog and with a 1:1 image ratio.

    This is the other blog: https://www.peeayecreative.com/how-to-move-the-divi-blog-title-text-and-button-over-the-image/

    Hope you can help me out!

    Reply
    • Hemant Gaba

      Hey Leon,

      I tried to replicate what you are trying to achieve on my end and everything is working fine. Please make sure that you are following the steps properly.

      Reply
    • Hemant Gaba

      Hey Rachel,

      I guess the issue is already resolved on the website. Please let us know if you need any further assistance.

      Reply
  18. Sonja

    Hello,
    is it at all possible to control the portion of the image that’s being cropped? For example, if you don’t want to display the middle but the top section?
    Thank you!

    Reply
  19. Sonja

    Thank you for this tutorial, I find it very useful!
    Right now I have a blog that features mainly books, magazines etc (portrait-format stuff), so when I use a different (landscape) aspect-ratio I would like to show not the middle portion of these images but the top (so that the title is on the image). Is that possible somehow?
    Thank you!

    (Sorry, site’s under construction right now)

    Reply
    • Hemant Gaba

      Hey Sonja,

      I am afraid but I need the URL so that I can spot or replicate the issue on my end and then provide a best solution for the same. Whenever the website get’s ready, please share the link so that I can see what can be done. 🙂

      Reply
    • Hemant Gaba

      Hey Alan,

      I am afraid that I am not able to spot any issue with the blog featured images as they look perfectly fine on my end. Please try using a different browser and see if that helps.

      Let me know how it goes. 🙂

      Reply
  20. Aurora

    Thank you for this tutorial! I applied this on an image slider and it worked out! However, the slider somehow has a big space in its padding-bottom. If I set the slider’s padding bottom to 0, the ratio of the image got changed, too. My design is to place the image slider in the left column and some text of description in the right column where the text should be vertically aligned to the centre. Now, since there’s extra space created from the image slider from the padding-bottom, the text doesn’t visually seem aligned to the centre anymore.

    Is there anyway to remove the extra padding from the image slider?

    .full-image-slider .et_pb_slide_image img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    }

    .full-image-slider .et_pb_slide_image {
    padding-top: 75%;
    display: block !important;
    }

    Reply
    • Hemant Gaba

      Hi Aurora,

      Could you please share the URL where you are facing this issue for me to investigate further?

      Reply
  21. Kimberly Hargis

    Hi, when I paste in the 1 x 1. Divi gives me unexpected brace issues. When I remove the braces, Divi gives me other error messages. Any advice/

    Reply
    • Hemant Gaba

      Could you please share the screenshot of the braces issue or the error that you are getting for our better understanding?

      Reply
  22. ayush mishra

    hey, this concept is applicable but this code degrade the quality of image , so do you have any solution to fix this

    Reply
  23. Patrick

    Hello.

    I was happy to find this tutorial to make my blog module display square pictures. Unfortunately, it scales the image, nut does not display the entire image. The image is a square image, so theoretically all of it should show.

    Any thoughts?

    Reply
  24. Marie

    HI, great tutorial, but when I enter the code in the css it did not work, it tells me “expected rbrase” what does that mean ?

    Reply
  25. Sam

    Thank you… thank you… thank you!!! I have been fighting with adjusting the images for a while.

    Reply
  26. Dieuwertje Leenaarts

    Hi, I loved the explanation as my photos have a better fit now. I do however have one problem which you can maybe help me with. The photos are cut off and go further underneath them. It looks very weird, but I can’t fix it. Could you maybe help with this?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Dieuwertje,
      It looks like the issue is actually related to having 4 columns. I assume you used my other tutorial for that, and if so it looks like you missed the code at the end. You need to have this added:
      .et_pb_posts .et_pb_post {
      -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
      page-break-inside: avoid; /* Firefox */
      break-inside: avoid; /* IE 10+ */
      }

      Reply
      • Dieuwertje Leenaarts

        I added the CSS and used your tutorial for the images. It adds now a big white part on my website and it happens when I add the image CSS.

  27. CARLOS CONTRERAS

    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.

    Reply
  28. Corine Pettit

    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.

    Reply
  29. Juli

    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!

    Reply
  30. elizabeth england

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

    Reply
  31. John Warnock

    Thanks for the tips, worked perfect.

    Reply
  32. Rickard

    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 cropped it twice. Yeay…

    Not what the basic user would really expect, I think.

    As if that wasn’t enogh we then enlargen the image to fill the space it posess. This differs based on the padding and other settings, but could be somewhere between 25-30%, totally messing up the image quality.

    WordPress comes with the function to set custom image sizes, why not use that instead?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
  33. James Carter

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

    Reply
  34. Jessica Saigeon

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
  35. Marcus

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

    Reply
  36. lucie

    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?

    Reply
  37. Anneska van der Spoel

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

    Reply
  38. Nick

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

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart