How To Change the Divi Gallery Image Aspect Ratio Crop Tutorial by Pee Aye Creative

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

Hey friends, I'm excited to share with you some very helpful CSS snippets to change the Divi image gallery 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 gallery 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

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

Change the Divi Gallery Image Aspect Ratio

Where To Add The Code Snippets

If you are using our free Divi child theme, place the snippet into the style.css file. Otherwise, place it in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*image gallery item aspect ratio square 1:1*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Last updated Apr 16, 2022 @ 2:58 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

67 Comments

  1. Donna

    there is no logical reason why “padding-top” works for that…but it does I guess…very weird, but thank you! Somebody is a CSS master!

    Reply
  2. Paul

    That’s a little bit of awesome right there!

    Trying to do this with the Fullwidth Portfolio with the Square 1-1 Option. What do I need to add to the 1-1 CSS to fix?

    Thanks for any help you can addd here!

    Reply
  3. Doug Spence

    Hi, Im getting “expected RBRACE” shown below. THANKS!

    .pa-image-gallery-1-1 .et_pb_gallery_image {
    EXPECTED RBRACE
    padding-top: 100%;
    display: block;

    Reply
  4. Juan

    You fixed my issue with the different thumbnails sizes. Thanks!

    Reply
  5. Laurie

    Hi There,

    When I add this into the Main Element box under Custom CSS of my Divi Gallery Module, I get EXPECTED colon between lines 2 & 3 and well as UNEXPECTED token “}” at the end.

    Here is what I am pasting (and removing the . at begining):

    /*image gallery item aspect ratio square 1:1*/

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

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

    Am I putting it in the wrong box? Which . do I remove? I’d really appreciate any feedback you can give. Thanks!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Laurie,
      You need the . at the beginning. You only need to remove the period in the Divi module when you paste just the class there, like “pa-image-1-1”

      Reply
  6. Jan

    Bro, this Gallery module was killing me! But then I found your Tutorial.
    THANK’S mate!!! Solved all my problems.

    Reply
  7. Benjamin

    Hi, thanks for sharing this code. I am having the same issue as some of the others.

    I paste the code and double checked it. this is what my main element in divi shows once I do. It throws in Expected RBRACE and Unexpected Token ‘ } ‘/

    /*image gallery item aspect ratio square 1:1*/

    .pa-image-gallery-1-1 .et_pb_gallery_image {
    padding-top: 100%;
    “Expected RBRACE.”
    display: block;
    }

    .pa-image-gallery-1-1 .et_pb_gallery_item img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    }
    Unexpected Token ‘ } ‘.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Benjamin,
      You can’t place CSS like this in the module. You need to add the class “pa-image-gallery-1-1” to the module, then add the CSS snippet in Theme Options.

      Reply
  8. SecondCrow

    Hey there,
    I’ve read all the previous comments and I’m still having issues.
    I pasted the class in the module and the CSS snippet under Theme Options. But nothing changes in the module. What could be going wrong? I checked to make sure I have brackets and dots in the right places.

    Reply
  9. Eoin

    Hi Nelson,
    Thanks for the code I’m finding it very useful.

    I am having a bit of trouble with it though.
    My images are square to begin with – but for some reason your code is not showing the whole image. It is showing square- but missing around 10% from around all edges of the image. I really would love to show the whole image.
    Any help greatly appreciated.
    Thanks
    Eoin

    Reply
      • Nick

        Hey I’m having this same issue, but I don’t want to apply your crop fix to the entire page, just a specific gallery. Do you have a do not crop image code for an “advanced tab” custom css section?

      • Hemant Gaba

        Hey Nick,

        I am afraid that the PHP code can’t be module-specific and using the PHP code is the optimum solution for the cropping issue. If you want we can provide you with a condition to run the code on a specific page.

  10. Michal

    Great tutorial and thanks for the help. Anyone having any weird stuttering/lagging/freezing on Chrome when implementing the “object-fit: cover” line specifically? It seems to be the cover attribute messing stuff up… contain causes no issues but doesn’t achieve the desired result. I have tried it on Edge as well, where things seem to behave normally…

    Reply
  11. Giggs

    I have tried this on a friends site and it works perfect using the blog module on any given page but when viewing the actual blog entry the image overlay is overflows upwards leaving the bottom of the image without overlay 🙁 Is there a fix for this please??

    Reply
      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Giggs,
        First of all, I was really confused because this tutorial is about a gallery and you keep saying blog.

        The issue is unrelated to my post, you have some custom css there doing this: #left-area .hentry img:not(.wp-smiley) {
        margin-top: 20px;
        }

      • Giggs

        Well you are right, many thanks for your help!!

  12. Anne

    Hi! thanks for the code snippets! They are great! I’m having some trouble with getting it to work. I added the following to my theme editor:

    /*image gallery item aspect ratio square 1:1*/

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

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

    and then this to the CSS ID & Classes in my gallery settings:
    pa-image-gallery-1-1

    But somehow my gallery is still showing all kinds of different aspect ratios. Am I doing something wrong?

    Reply
  13. Marco

    Hi Nelson,

    thanks for this very helpful and perfect explanation. A good way to show the gallery images nice and clean. But my biggest concern, and I did not found any solution for it with divi, is the resizing of images – means, any gallery image is loaded in it’s full size and resized via css.
    This method ends up in a really bad performance rating regarding loading time measured by GTMetrix or Google Page Speed – especially when Galleries like Photographers Portfolios contains a lot of images. The recommendation is “Serve scaled images”!

    Sorry, my question is a bit off-topic but is there any chance to get rid of this in Divi?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Marco,
      Very good question. I’m not an expert at that, but I’d love to know more myself. I know that SRCset is part of that, and Divi has that now, but it is more to it than that. I’ll see if I can get an answer for this and if I do I’ll be sure to share it on the blog.

      Reply
  14. Rick B

    Yesterday I spent an unnecessary amount of time trying to surf the internet looking for this. Your blog post was EXACTLY what I was looking for. It was short, to the point and you had the code snippet right there with screenshots. Some of these blogs wax poetic with the whole back story…I just wish they’d get to the point like you did.

    I will say, however, I had the same error message as others, but saw your response to someone else clarifying to put the code snippet in the Theme Settings, not in the module. I mean, you said it in bold but for some reason we seem to be skimming over that part.

    It’s subtle, but important to know where that code needs to go. Maybe add a screen shot making it more obvious?

    Once I put the code in the right place it turned out great! Thank you.

    Reply
  15. James Wilkinson

    Great tutorial! Did exactly what I wanted – but I have a further question! LOL

    How can I set the focus for each image in its square? So need to be shifted right and down – others left and up…

    https://lavenderpromotions.com/drag-events/

    Is the page in question!

    Thanks for looking!!!

    Reply
  16. Katja

    Hi Nelson, is there a way to make the images varied through CSS? I’m currently trying to create a gallery for a client, but his images all come out in the wrong sizes or cropped. I added the link under the website link option. I tried fiddling around with the different examples here, but couldn’t get it to work properly, and I’m not confident enough to try and edit in the function.php like shown in your other tutorial.

    (client’s old website to show proper size of his images: https://peterravn.com/work-2013-2/

    My attempt at using the gallery module
    http://katjsoeg.dk/petrravn2/ptrravnwp/wordpress/project/paintings-2018-2019 )

    Reply
      • Katja

        As far as I’m aware I am using the regular gallery module? Even then, I have no choice with it, as my client wants the slider function for the gallery module. Thank you for your help otherwise.

  17. Jerry

    Hi Nelson,

    Thank you providing the excellent tutorials. You have a great presentation and it’s very easy to follow.

    I’m trying to implement the image cropping using your CSS code.

    I’m wanting to get this to work on the Divi Carousel Module. So far, I haven’t had any success. I seen that using this on Gallery images has a slight change in calling the CSS code. Does Divi Carousel require anything different?

    I’ve been testing the following for a 100% square crop. I can’t see to get it to work.

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

    Thank you!!!

    Jerry

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Jerry, I’m not familiar with it but most likely, yes. If you check our new Divi Carousel Maker it is better, you can use default Divi modules!

      Reply
  18. Joel

    Great tutorial! Is there any way to avoid cropping them all together and have mixed vertical and horizontal thumbnails that fit via max height? This creates a nice mix of vertical and horizontal thumbnails that all align on the tops and bottom, and vary in their widths. I’ve done this with a gallery plugin, but I was hoping to do this via the Divi gallery module.

    Reply
    • Hemant Gaba

      We have not given any thoughts regarding that right now but as of now by default, it is not possible. One thing you can do is to upload the images with the different aspect ratios and it will give you that variation look.

      Reply
  19. Susan Clifton

    Great tutorial. Is there a way to change the space between each photo? My client likes the photos to almost butt up against each other.

    Reply
    • Hemant Gaba

      Hi Susan

      If you want to change the spacing between the gallery images then please go to the Gallery Module Settings > Advanced > Custom CSS > Gallery Item Panel and place the code given below:
      margin-right: 1% !important;
      width: 24% !important;

      Margin right value will increase or decrease the gap between the images and the width value is used to adjust the width of the images. You can change the values as per your liking. 🙂

      Please let us know how it goes.

      Reply
  20. Holger Danske

    I am unable to do the above in the latest version of DIVI

    Reply
  21. Sian Wood

    Thanks. I feel like I just waved a magic wand. 🙂

    Reply
  22. Ester Krause

    Thanks for your css 🙂 I’ve used the square option. I already made square images but they are being cropped anyway. Is there a tweek possible so the tumbs can be displayed as they are?

    Reply
    • Hemant Gaba

      Hi dani,

      The pixelation of the picture depends upon its quality and there is no connection of the issue with the guide. The workaround could be to edit the images exactly to a resolution that you want and then upload that.
      Other than that Simple Image Sizes is a third-party plugin and their support team will be the best to guide you in the right direction.

      Reply
  23. Steven

    How about a square grid (3 columns) with the thumbs all in their original size ratio? All centre aligned both horizontal and vertical within their squares.

    Practically every photo gallery plugin I can find crops the image or if they don’t the masonry format is used.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      What you are describing is “masonry” or “mosaic” gallery and Divi cannot do that by default but I will have a solution to that in the future.

      Reply
  24. Tom

    this is amazing method. Thank you so much.

    Reply
  25. peter

    Brilliant, thanks. Cleared up some other thought’s I had floating around in my mind as well.

    Reply
  26. Robert

    Hey Nelson, I tried to post a question today but it did not go through I guess.Let me thank you first for the great tweak. It used to work for me and I’ve been really super happy with your CSS snippet. Great work, I have to say. Now suddenly it stopped working or let’s say it does not work anymore as expected.

    http://karen.interstanding.com/errol-trotman-harewood-2/

    Could you have a look at my staging site maybe?

    When I upload new pics to the gallery, they’re oversized and blurry.
    Like the first image in the gallery. The older images (starting from image 2 in the gallery) are fine. I have not changed anything in media sitting or elsewhere.
    Do you have an idea what could be wrong here?

    Would be also very appreciated if somebody else here would have an idea, which could help me.

    Best regards and keep up the good work!

    Robert

    Reply
    • Hemant Gaba

      Hey Robert,

      I have checked the URL and every image seems to look perfectly fine on my end. Could you please try using a different browser and see if that helps?

      Reply
  27. lauren

    Hi,

    I try to do this but it does not work. The image stays weirdly cropped. Not sure what is going on? It does not show the full image

    Reply
    • Hemant Gaba

      Hey Lauren,

      Could you please share the URL of the website for me to investigate further?

      Reply
  28. Cora Kobischka

    Hi,

    How can I prevent divi from cropping the gallery images?

    Reply
  29. J

    Hey there sir, first off thank you for making all this content. But I just tried this solution and I don’t think it works anymore.

    Reply
    • Hemant Gaba

      Hey there,

      Will check this on our end and get back to you on this.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart