Change the Divi Gallery Image Aspect Ratio 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!

Use Any Image Size or Shape!

Change Images to Square or Any Other Proportion

Everyone seems to love our other post on changing the image aspect ratio of Divi images, but that tutorial only shows how to do it on the Image Module. In this tutorial, we will be using the same math, same code, and the same process to change the Divi Gallery image aspect ratio using the Divi Gallery Module. You can soon be adding any combination of landscape, portrait, or odd sizes images to the gallery and they will automatically become uniform.

Explanation & Calculations

How To Force Divi Image Aspect Ratios

Most of us are familiar with image or video aspect ratios. Lots of times our devices are made to these proportions as well. The first number in the ratio is the width, and the second number is the height. As you can see in the CSS examples below, the CSS trick works with padding and uses a percentage. Basically, the percentage is the height divided by width. To calculate what percentage to use in the CSS for the Divi image gallery item aspect ratios, just use this math formula.

Divide the second number by the first number
Move the decimal over two places to the right
Add a percent sign

Square 1:1 – 1 / 1 = 1.00 = 100%
Landscape 16:9 – 9 / 16 = 0.5625 = 56.25%
Landscape 4:3 – 3 / 4 = 0.75 = 75%
Landscape 3:2 – 2 / 3 = 0.6667 = 66.67%
Portrait 9:16 – 16 /9 = 1.7778 = 177.78%
Portrait 3:4 – 4 / 3 = 1.3334 = 133.34%
Portrait 2:3 – 3 / 2 = 1.5 = 150%

Now you can use this formula for other sizes as well!

Examples & CSS Snippets

NOTE: Always be sure to add the correct class to the Divi Image Gallery Module so that it can change to the desired aspect ratio. In this tutorial, I kept it very simple! (Just take out the dot at the beginning.)

Change the Divi Gallery Image Aspect Ratio

As usual, you can copy and paste these CSS snippets into the Divi>Theme Options>Custom CSS box.

Square 1:1

Pole Steeple in Pine Grove Furnace State Park

Rock Outcroppings at Pine Grove Furnace State Park

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

Landscape 16:9

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

Landscape 4:3

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

Landscape 3:2

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

Portrait 9:16

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

Portrait 3:4

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

Portrait 2:3

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

Like these photos?

Join us on Instagram!

Those images were all taken by myself in Pennsylvania. If you happen to like that sort of thing, follow my Instagram pages for more photos!



@peeayecreative



@nelson.lee.miller

Subscribe for more stuff like this.

We have more cool stuff coming for our subscribers!

Please share this post!

Facebook Twitter Pinterest Email Share

Nelson Lee Miller

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