Code by Day | Explore By Weekend

How To crop Divi images and Change Divi Image Aspect Ratios in the Divi Builder 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.
/*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;
}
7
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

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
46 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Elisandro Borges
Elisandro Borges
2 years ago

Awesome tutorial/snippets! Thanks a lot!

Elisandro Borges
Elisandro Borges

You bet, Nelson! Unique resource! 🙂

MG
MG
1 year ago

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

Tim Gossett
Tim Gossett
1 year ago

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?

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

Nicolás
1 year ago

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.

Hendrik Mijnders
1 year ago

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.

Gavin Fenton
Gavin Fenton
1 year ago

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

Gavin Fenton
Gavin Fenton

I see. Thanks very much – loving your tutorials, site and approach, keep it up! 😊

KP Chaudhary
1 year ago

Great!

Jim C
9 months ago

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

Lance J
Lance J
8 months ago

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?

Lance J
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.

francesca
7 months ago

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.

Cristian Loaiza
Cristian Loaiza
7 months ago

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

Cristian Loaiza
Cristian Loaiza

Hello if you look for example here https://www.dondemiveterinario.com/cuidadoybienestargatos/como-saber-si-mi-gata-esta-embarazada/. I want the comment box not to be full width if not in the row where the text is.

Last edited 7 months ago by Cristian Loaiza
Vikas
7 months ago

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

Elena Ferrer
Elena Ferrer
6 months ago

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

Tim
Tim
6 months ago

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.

Last edited 6 months ago by Tim
Tim
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.

Last edited 6 months ago by Tim
Claralinda
6 months ago

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

RudyG
RudyG
6 months ago

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

Michael
Michael
5 months ago

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

amine
1 month ago

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.

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

Visit Our Channel

Pin It on Pinterest

0

Your Cart