How To Crop Divi Images | Change Image Aspect Ratio In The Builder

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.

This tutorial will show you how to resize images in the Divi Image module directly in the Divi builder layouts. You can choose any aspect ration you want, such as 9:16, 4:3, or even square 1:1. All you have to do is add a CSS class to the image module and copy and paste a snippet of code and you will have consistent square or tall or wide images no matter what size or shape image is uploaded. I use these all the time, and if you enjoy them, please consider sharing this with post with your group of friends.

[wisdomcamille]

You make your videos very simple to understand, Thank you

[livingwithshon]

This is great, thank you so much. Any way to crop off the bottom of the image instead of the top? Or better yet, adjust the postion of the image in the crop in any direction? Thanks for any advice.

[alexcharlton]

Love the video, subbed. Also, I've hiked through PA and it's beautiful, your pictures show it!

[BrandWebMedia]

best divi tutorial out there, thanks my man

[foodieadventurerrider]

Awesome, very detailed, and informative. Thank you.

[journeywithoutdistance]

This is so good. Thank you for sharing!

[livingwithshon]

For anyone having trouble, when you add the custom class do not add the period before the class. I was racking my brain trying to figure out why it wasn't working. Hope this helps.

[noavankatwijk]

Thank you so much for this info, it's solved my problem.

[mauricelee]

Thank you so much for this video. I am working with a client now that has images he wants to use on his site but they all don't have the same ratio. From what are see this should solve the problem, correct? Also, you started to mentioned something about not needing photoshop but then you stopped. Were you about to say that using this method would eliminate the need to resize images in photoshop and similar tools?

[marciaturley]

Thanks again for another great tutorial. Quick question. I'm using CANVA. As a starting point what size should my CANVA image be? For example, if I wanted to create an Landscape 16-9 image. Should I resize my image, in CANVA first to 1280 X 853 px to match the Landscape Custom CSS size ?

[recomposemedia]

Great tutorial! Is there a way to zoom into the images to change the view area that you are cropping into?

[samuri]

I tried it for video it works on that too!

[Victor-gsyk]

I have an issue that I can't solve. I want a fullwidth gallery with a fixed height, so the images won't make the layout jump around as they change. The thing is, I want to crop the uploaded images to the same ratio, so my client doesn't have to worry about editing sizes before uploading. Is there a way to match this ratio mode with the fixed height tutorial you gave? I'm trying to figure out a way to keep the images fullwidth and the gallery height fixed, no matter if some cropping might occur on images that are originally squared, for example. Hope I made it clear. Thanks a lot for the great material!

[sannepeters]

Absolute legend!
I do have a question..the 'display: block; ' should prevent the text from overlapping the image, correct? 
In a two-column row I placed an image left from some text and gave the img a 4:3 ratio. But on mobile the text is overlapping the image. It seems it doesn't stick to the 4:3 aspect ratio on mobile

[abigroman]

How would you use "Object-Fit" so the image isn't cropped but shrunk? Figured it out in the other video!!! Thank you!

[henryrobusto]

El unico en todo you tube. es complicado encontrar css simple hay cosas que uno ya no se acuerda hostias. TOP ✌

[MsElegance]

Can you add a button inside a blurb module. Also, having a problem with uploading images which are stretched or don't fill up the blurb box or smaller.

[jolynesevilla]

Hello Nelson! Your tutorial videos are great! However, I am trying to paste the code to CUSTOM CSS it will not paste. I am using a Mac, is it different on a Mac? Also, when I go into CUSTOM CSS it has 3 boxes, " BEFORE, MAIN ELEMENT, AFTER" Can you advise. Please....

[cliffordwishart]

Will the CSS still work if we get a Dive Theme update or will we loose the custom CSS?

[galeriachocolate]

Hey! I got a Q, does it works for woo product images? Cause I use, but it didn't works. Besides that, awesome video!