How To Crop and Change The Aspect Ratio of Divi Images tutorial by Pee Aye Creative

How To Crop Divi Images and Change Aspect Ratios In The Builder

Hey friends, I'm excited to share with you some very handy CSS snippets to crop and change the Divi image aspect ratio in the Divi builder.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

NOTE: We just found out if the image link is set to open in a lightbox this will not work. However, this is uncommon and we will look for a solution.

/*image aspect ratio square 1:1*/

.pa-image-1-1 .et_pb_image_wrap {
padding-top: 100%;
display: block;
}

.pa-image-1-1 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 16:9*/

.pa-image-16-9 .et_pb_image_wrap {
padding-top: 56.25%;
display: block;
}

.pa-image-16-9 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 4:3*/

.pa-image-4-3 .et_pb_image_wrap {
padding-top: 75%;
display: block;
}

.pa-image-4-3 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 3:2*/

.pa-image-3-2 .et_pb_image_wrap {
padding-top: 66.66%;
display: block;
}

.pa-image-3-2 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 9:16*/

.pa-image-9-16 .et_pb_image_wrap {
padding-top: 177.77%;
display: block;
}

.pa-image-9-16 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 3:4*/

.pa-image-3-4 .et_pb_image_wrap {
padding-top: 133.33%;
display: block;
}

.pa-image-3-4 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*image aspect ratio landscape 2:3*/

.pa-image-2-3 .et_pb_image_wrap {
padding-top: 150%;
display: block;
}

.pa-image-2-3 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}

Last updated Aug 31, 2021 @ 6:25 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

70 Comments

  1. Elisandro Borges

    Awesome tutorial/snippets! Thanks a lot!

    Reply
      • Elisandro Borges

        You bet, Nelson! Unique resource! ๐Ÿ™‚

  2. MG

    Thanks for this –
    But I am finding that this does not work all I get is very very thin images? am I missing something?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi there, please share a link so I can try to see why it isn’t working for you. I’ve tested and used this many times, so I know it should work ๐Ÿ™‚

      Reply
  3. Tim Gossett

    Follow-up to my earlier message: I see now that I missed that the code is for the image module. I actually need to do this for the blog module. What changes would I make?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Tim,
      This same solution works for other modules, but the thing that needs changed is the css class that it is targeting. So for the blog module, use a.entry-featured-image-url instead of .et_pb_image_wrap

      Reply
      • kat b

        Thanks for the tip!! I am trying for a text module (so that I can then apply a text/image hover affect). What would I use instead? Thank you ๐Ÿ™‚

      • kat b

        Hi again! Thanks for the quick response. I saw that tutorial but it is not what I am after because I do not want the text to be there permanently.

        I would like the image to be displayed and then on hover have a gradient with text displaying overtop explaining what it is (this is for my portfolio). All images need to be square.

        The projects/galleries divi modules are not flexible enough – fixed columns + image sizes and no text option for hover.

        Sooo I wanted to try your 1:1 code in a text module (cause I have figured out how to overlay the text/gradient). Orr if you have another solution for how to make this work with the other divi modules I am all ears!!!

        Thanks again ๐Ÿ™‚

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Katrina,
        In that case, just apply the code from the other tutorial on hover! So in the CSS snippet add :hover before the first {

  4. Nicolรกs

    Hi, now en english ๐Ÿ˜‰
    Very interesting. My question is … is there a way to combine vertical and horizontal images in the same gallery and that the thumbnails come out horizontal (for horizontal and vertical images (for vertical images. My problem is that, any layout option I choose cuts out the thumbnails. If I have combined images, I hope you understand, thanks.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Nicolรกs,
      I think I understand, you are thinking more of a grid of images that is like Pinterest where no matter what size they all stack? I will look into that for sure! Keep an eye on the blog!

      Reply
  5. Hendrik Mijnders

    Dear,

    I was very glad to see your solution. In a certain way it helped me out! So thanks!

    But the case is that my photo’s are all zoomed in right now.

    I cut them in the right aspect ratio in photoshop but still it doesn’t work.

    See the link below:
    https://handirkx.com/original-artworks/

    In future it have to work without photoshop aswel.

    Thanking you in advance.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Hendrik,
      Please double check your code, the point of this tutorial is to NOT use Photoshop. It certainly does work, as you can see in the live examples.

      Reply
  6. Gavin Fenton

    Hi, trying to use this for the blurb module but my css isn’t taking – modified selector is e.g .pa-image-1-1 .et_pb_main_blurb_image (Iguessing this is wrong?)

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hey Gavin,
      The blurb image is a bit different because of the way 100% height makes the image fill the entire blurb div. I was trying to hack it, but there is no good way to do it. However, now that we have column design options, there’s rarely a use case where you can’t use an image and a text module instead of a blurb.

      Reply
      • Gavin Fenton

        I see. Thanks very much – loving your tutorials, site and approach, keep it up! ๐Ÿ˜Š

      • Nelson Lee Miller (aka The Divi Teacher)

        I’m so glad, Gavin! Thanks for those kind words, and do let me know if you have ideas and suggestions for hacks and tutorials ๐Ÿ™‚

  7. Jim C

    Unfortunately I can’t get this to work.

    You tell us to put the ‘snippet’ in the Custom CSS box, but there are THREE Custom CSS boxes: Before, Main Element, and After.
    should we be putting parts of the code you gave us into more than one of these boxes? Or all into one box? WHICH ONE(s)?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Jim,
      Here’s what it says “As usual, you can copy and paste these CSS snippets into the Divi>Theme Options>Custom CSS box.” You need to go to your Dashboard, then click Divi, then click Theme Options, scroll down, and the custom css box there is where you put the CSS for any tutorial we have.

      Reply
  8. Lance J

    Thanks for this – this is working as long as I know the aspect ratio I need in advance; however, what if I don’t know the aspect ratio that is needed because the height of the element might change while the width does not? \

    For instance, if I have a row where I set “Equalize Column Heights” to yes and the tallest column is a text column, how can I make sure that my image in another column actually fills the entire column height and width, even if the height of the text should change?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Lance,
      I think I understand what you are asking, but this is different than the tutorial. You could try setting the min-height for the image to 100%, then set the overflow (advanced tab>Visibility toggle) to hidden. Or you could try just putting the image as the background of the column, and it will do exactly what you describe (just add a divider module to keep some height in the column).

      Reply
      • Lance J

        Thanks, Nelson. Yes, I realized that this was different from the tutorial, but your tutorial is the closest thing I have found to anyone explaining how to do what I was trying to do, so thought I’d ask, anyhow. As it happens, I played around and ended up deciding that making the image a background image for the column was the best way. Thanks for the reply, and for your tutorial series.

  9. francesca

    thanks however it didn’t work. As I paste the code, I get some errors in red and nothing happens to the image. I tried a few times but keep getting the same.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      As I noted before, the errors are not real errors. Divi simply does not know the CSS. The CSS is perfectly valid and works even if the Divi Builder things otherwise ๐Ÿ™‚

      Reply
  10. Cristian Loaiza

    hello excellent your tutorials I would like to know how you put wpdiscuz in a single column thanks

    Reply
  11. Vikas

    Hello Nelson… will this css id work on the image inside a blurb module… as the blurb height becomes same but the image height does not.. thanks

    Reply
      • Andreas

        It’s been a while since you wrote this, but I thought I’d share the solution I found for the blurb module here. Perhaps people find it useful. Almost all credit for this goes to Tom Greer (https://trgwebdev.com/force-divi-blurb-module-images-to-a-uniform-size/)
        I simply played around with his code and adapted it to your pa-image- classes..

        Basically, it’s just what you suggested, but it’s a little trickier to figure out the right classes to target.
        And there is one important addition, “position: relative” for the container class.

        So, here goes (I just put the 1:1 example here):

        /*image aspect ratio square 1:1*/
        .et_pb_blurb.pa-image-1-1 .et_pb_main_blurb_image {
        display: block;
        position: relative; /* needed for blurb module image */
        }
        .et_pb_blurb.pa-image-1-1 .et_pb_image_wrap {
        padding-top: 100%;
        }

        .et_pb_blurb.pa-image-1-1 .et_pb_image_wrap img {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        object-fit: cover;
        }

        Enjoy!
        Andreas

  12. Elena Ferrer

    Beautiful! You helped me soo much!! thanks a lot!

    Reply
  13. Tim

    Hi Nelson, Thank you for the passion of teaching and sharing your knowledge. I have a square image which I placed in my gallery module. 3 of them fit in a row inside the module.

    problem: the aspect ratio is not 1:1 the height is full but the width are cropped.

    I posted pa-image-1-1 in the gallery module CSS Class field. And the rest of the code to the page settings advanced > CSS field

    It didn’t work. Please help.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Tim,
      First of all, you are saying “gallery” but this post is not about the gallery. This one here is for the gallery: https://www.peeayecreative.com/change-the-divi-gallery-image-aspect-ratio/

      Secondly, if the image is not square (which is why you would be using this) then something has to be cropped, whether that is the height or width.

      Try using the gallery code and then let me now if I am not understanding something.

      Reply
      • Tim

        Hi Nelson,

        Thank you for responding. My images are square but the thumbnails only shows 80% of the image starting from the center.

        I will study the link you provided. Try it and let you know.

        Thanks.

  14. Claralinda

    Hi,
    it seems it’s not working on my website.

    I found a solution for the portfolio but not for the gallery. Thanks for any help! ๐Ÿ™‚

    Reply
  15. RudyG

    Hi Love this Tutorial thank you. I noticed that it will not work on the blog templates in divi. For example I have featured image that will changes to different sizes but when i apply the ratios it ignores them. I placed the code in both template and page layouts? Any thoughts

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Rudy,
      This code would only work in the Divi Blog module because that is the code it is targeting. It would not affect images on the actual blog posts.

      Reply
  16. Michael

    Wonderful explained, thank you so much.
    Just tried to ‘combine’ your code within a media query to get a square ratio, but the images diesappears then, see here: http://modefolles.de/wordpress/ the bw portrait image. do you see a possibility to combine? this is the code I used:

    @media all and (max-width:768px){
    .et_pb_image_wrap {
    padding-top: 100%;
    display: block;
    }
    .et_pb_image_wrap img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    }
    }

    Reply
  17. amine

    Thanks a lot for your awesome materials.

    I’ve try this tricks with tall image 1000*1500 but unfortunately doesn’t work.

    Please if you’ve any suggestion let me know it

    my regards.

    Reply
  18. photoMaldives

    Thanks, Nelson – remains useful to this day. And there’s no way I would have figured this out!
    My image looks much better now, although the crop is central and I would prefer it at the top.
    People can also experiment object-fit depending on requirements (try contain or scale-down).

    Reply
  19. Abigail

    I’ve noticed since I last updated the Divi Theme my cropped images are no longer displaying correctly. There is space around them. Any one else having this problem?

    Reply
  20. Kristine Kingery

    I need help. I used this to resize images to 1:1 ratio. It initially worked but in the last couple of weeks, if I work on a web page, even though in DIVI editor, it shows the images as 1:1, when I save, the images are not showing correctly. I even deleted the images and added them back in one at a time. Not sure why this is happening. Here is an example of a web page that I just tried to update. https://potomacfiberartsguild.org/instructors/
    I definitely made sure that I was applying this to images and not a different module.

    Our overall page is showing this same issue on the three pictures towards the bottom of the page and again, the only difference is that I updated a picture about a week ago.
    https://potomacfiberartsguild.org

    Reply
    • Hemant Gaba

      Hi Kristine,

      While editing in the Divi Builder everything is showing fine but when you exit the builder the result changes can be a problem of cache so could you please delete your cache by going to the Divi > Theme Options > Builder > Advanced and click on the clear button in front of static CSS file generation to clear the cache. After doing that please try opening the website in the incognito mode to see the actual visitor’s view.

      Let me know if that helps. ๐Ÿ™‚

      Reply
  21. Paul

    Another great tip, thanks ๐Ÿ™‚
    It stops working if I set the image to open in a lightbox though. Is there a straightforward fix you’re aware of?

    Reply
    • Hemant Gaba

      Hi Paul,

      I am afraid that I am not able to replicate the issue on my end. Please make sure you are following all the steps correctly.

      Reply
      • Paul

        Hi Hemant, Sure. I’ve checked it carefully. I did notice that it doesn’t work unless I set image to force full width, which isn’t mentioned above. The moment I set image to open in a lightbox it just disappears. Switch that off, it re-appears !

        I’ve setup a temporary URL to link your through to an example page where you can see it https://www.temporary-url.com/6822 . See last image on bottom of page.

      • Hemant Gaba

        It seems that the lightbox image is responding differently from the frontend image. We will look into the issue and will get back as soon as possible.

      • Paul

        Hemant, I was able to fix it. Two issues – I had some flex CSS on the columns, which caused the image to shrink to zero size (my bad!). In the image module, the toggle to configure different heights & widths for images on desktop/tablet/mobile was toggle-on, though not actually in use. This caused images not to stretch to cover properly (they’d stretch to width, but not height). Both corrected & it now works. Thanks ๐Ÿ™‚

      • Hemant Gaba

        I am very glad to hear that. Please let us know if you need any further assistance. ๐Ÿ™‚

  22. Ernst

    Can’t seem to get it to work on certain blurb images.
    I’ve added the class ‘.ookinteressant’

    .ookinteressant .et_pb_main_blurb_image a {
    padding-top: 60%;
    display: block;
    }

    .ookinteressant .et_pb_main_blurb_image a img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    }

    but it doesn’t seem to work.

    See: https://dev.ernstdejong.nl/ouders/wat-is-passend-onderwijs/ bottom of page

    Reply
    • Hemant Gaba

      Hi Ernst,

      I am afraid that this guide is the one that works for the Image Module and not the Blurb and that’s why you are facing the issue.

      Reply
  23. TonyD

    I find the proper use of images with Divi to be totally frustrating. It’s good that you are providing excellent tutorials such as this.

    I may be misunderstanding but It seems to me changing the aspect ratio could be seen as an uncontrolled crop in as much as there is no way of knowing what parts of the image will be lost. It would have been useful to see the impact of a change in aspect ratio on an actual image rather than on the default image space.

    Cropping I see as a deliberate removal of unwanted parts of the image – too much foreground, height, etc. Of course this could have the opposite effect of changing the aspect ratio while cropping.

    Thanks in advance for your comments.

    Reply
    • Hemant Gaba

      Hi Tony,

      This guide is about how you can crop Divi Images and change the aspect ratios. It makes sense that cropping can be uncontrolled but this is a quick and working solution for the people who have already uploaded all the images in the Media Library but if you are one who feels cropping is not a good practice then you can ideally resize the image first using the image resizing tools and then upload the image in the library and use it in the image module.

      Reply
      • Stefano

        It doesn’t work in iOS. I applied this css in a divi image module but in iphone it is not correctly shown.

      • Hemant Gaba

        Hey Stefano,

        It would be great if you share the URL of the page so that I can replicate the issue on my end as well and look for a fix.

  24. john

    Excelent!!

    Reply
  25. Zee

    Hello, I tried 1 : 1 aspect ratio for my home page images and works well. but it doesn’t work for the mobile devise version. Any advice on how to fix it.

    Reply
  26. Dax Davis

    Very nice way to solve a simple problem. Thank you.

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart