Code by Day | Explore By Weekend

How to crop resize change the aspect ratio of Divi gallery module images 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.

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;
}
17
Last updated Jan 3, 2021 @ 1:35 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

Leave A Response!

Subscribe
Notify of
guest
37 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Donna
1 year ago

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!

Paul
Paul
1 year ago

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!

Doug Spence
Doug Spence
1 year ago

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

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

Juan
1 year ago

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

Laurie
Laurie
9 months ago

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… Read more »

Jan
Jan
9 months ago

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

Benjamin
Benjamin
9 months ago

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 ‘ } ‘.

SecondCrow
SecondCrow
8 months ago

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.

Eoin
8 months ago

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

Michal
Michal
7 months ago

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…

Giggs
Giggs
6 months ago

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??

Giggs
Giggs

Hey Thanks for your fast answer.
This is the main page where I am using the blog module to show blog entries: https://chuspazos.com/ and this is a single blog entry: https://chuspazos.com/the-manueles-nuevo-disco/ where the image overlay is shown wrong.

Giggs
Giggs

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

Anne
Anne
6 months ago

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?

Anne
Anne

Clearing the cache worked! So dumb of me to forget haha

Marco
Marco
6 months ago

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… Read more »

Rick B
5 months ago

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… Read more »

James Wilkinson
4 months ago

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!!!

Katja
4 months ago

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 )

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.

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 5,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart