The portfolio grid is one of the better looking Divi features. I love that everything stays in a neat line on any device. The only problem is that not everyone wants a grid of ever so slightly landscape images. What if you want square portfolio images? or maybe you’re an author looking to display book covers? The forced aspect ratio being applied to the images by JS deep in Divi’s core can make this difficult.
Sure, you could use a fixed height to override this but then you lose the magic of the fluid grid. The real solution would be a if you could somehow set the height as a percentage of the width. With this CSS hack, you can.
.et_portfolio_image {
padding-top: 100%;
}
.et_portfolio_image img {
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Just change the padding-top until you get the desired aspect ratio. We hope you liked this tip 🙂
Thank you for that.
is there a way to make it works for IE?
My client is surfing with IE…
CS
Unfortunately we no longer test for or support IE. Microsoft is highly recommending IE users switch to Edge.
This is making them square, but cropping them. Is there to way to have square, and uncropped?
This is helpful BUT now the images are displayed to big, they overflow the container and look blurry. Guess it’s the same problem like Kirsten’s. Any help?
I have the same problem. Do you have a solution?
what about blog grid?
Very helpful, however, I’m not getting the desired gallery yet. I’ve used the css to a image gallery with 16:9 images. I managed to get the right grid (padding: 56,25%), but the images are still zoomed in. So I don’t see the full width and height of the images. Any suggestions on how to fix that?
Just correcting: *the image used for the *Gallery Module* is the et-pb-portfolio-image size.
(I wrote portfolio instead of gallery.
I followed several tutorials on how to change aspect ratio of the divi gallery images. I’ve succeeded to change the aspect ratio, however, the aspect ratio is changed but the image used for the GALLERY is the “et-pb-portfolio-image size”, which is, by default, 400x284px. So, when you upload a new image, divi theme will create a thumbnail for use in the divi gallery module (which is the same thumbnail for the portfolio module).
This image is by default cropped.
I installed a plugin called Simple Image Sizes. After installed, go to
Dashboard > Settings > Media Settings
You’ll then see a list of all the thumbnails used by the theme.
Go to et-pb-portfolio-image size and choose Cropping? NO.
Click on update on the right and then don’t forget to click on Save Changes down on the page.
Delete the images you want to use and Re-Upload them!
Create the gallery, and you’ll see the result.
I didn’t twinkle around with the settings max-width and max-height on the Simple Image Sizes, but you may try.
If you don’t see the result, you can do two things: change the filename of the images before Re-uploading (put a number or something at the end), or use a plugin like Regenerate Thumbnails.
OMG thank you very much Ulisses! You saved me!
Super new to building a website in Divi and need to change the size of a blog featured image from a rectangle to a square (logo size) and came across this blog post. I’ve not idea how to find the name of the image to put the code in or is there a way to add this code to the custom CSS of the blog entry in the module?
P.S. Sorry if I’m not getting the terminology right
P.P.S. Small world – I live in Havant 😉
Thanks you saved me a headache!
Please change my previous comment.. Because I found the answer to my issue: When I use object-fit:contain, it actually contains the whole image. Again, YOU ROCK! Thank you for fixing my issue!!
Oh man, you rock! I spend a day looking for an answer to my issue:
I have a Divi gallery slider and wanted to keep the images at a certain ratio. One of them however would be a ‘portrait’ instead of a ‘landscape’, so I had all kinds of issues. Thankfully some people here already pointed out:
I should add, this also works with the Divi Gallery.
.et_pb_gallery_image {
padding-top: 100%;
}
.et_pb_gallery_image img {
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
I used this… then changed ONLY the padding-top to 64% (because of the ratio I had) and now that last image also shows in that ratio.
The only downside is that it only shows part of the image (instead of the whole image, but then smaller). Still a great solution, but if there’s a way to have an image actually resize to fit inside the ratio div, that would rock even more! (oh, btw.. your submit button is white, so it was hard to find..)
Am i right thinking this is a universal change that would be applied to every image size?
I have got a few different disciplines (animation and design formats) where i need to use SQ / 1920×1080 / 1080×1920 for showing video stills for various social formats, SQ for photography etc etc. there some way to point the code to link to a certain project page? or in fact can the code be added into the module CSS so the change is unique from module to module (non universal) as apposed to the Theme options CSS which i assume is universal over the whole site?
thank you look forward to hearing. happy new year too:)
I’ve just tried it (Theme Options/Custom CSS field and style.css) and it’s not working. Any idea why?
any idea how to change the default width and height o the fullwidth portfolio in carousel mode?
Where do I put the code?
In the CSS section of the Divi Theme Options
Thank you SOOOOO much. This saved my life for a client site who creates hundreds of art pieces that are in square format.
My square images are being cropped. Any ideas on a fix?
I’ve been trying to sort this with advice from various websites with no success until now. However this one has worked – I have square thumbnails at last, for which many thanks! However there is an issue. I’m using the CSS with Divi Gallery (copied and pasted from John) and there is something odd going on. I have both landscape and portrait images that I want to display as square thumbnails. Most of the thumbnails are displaying fine, but some of the landscape images are stretched, and even more odd is that one or two of the images which are of square origin, when displaying as square thumbnails are being cropped (as can be seen when you click to enlarge them). To see what I mean, click on the Galleries/Sold page. Any idea what’s going on? Thanks
Any ideas?
I know your comment is 3 years old. But I have the exact same problem. Any change you found out how to fix it?
Can you send link to your site with the issue?
Im new to WordPress and dont know much about coding so this is my question where to i put the code you just used?
Working with Square images and love this feature. Is there a way to change which thumbnail is used? because of the object-fit:cover, the landscape thumbnail is being zoomed and as a result, pixelated.
There is a square thumbnail in the uploads folder, but I don’t know how to tell Divi to use that instead.
This isn’t the ideal situation, but if you go into the /wp-content/uploads/…. and delete the 400×284 px version of the photo, it automatically uses the main image and fits it into the space.
Again, not ideal, but it works.
Sorry, I’m spamming this post now…
That didn’t actually work, to delete the 400×284 px image. It worked for the 1st image, but not the next 3 in the grid.
Would love to know the answer to this as well.
I think I have sussed it now. Thank you so much. Most useful video I’ve seen for doing this!
I think I have sussed it now. Thank you so much. Most useful video I’ve seen for doing this!
I’m so close yet so far! I’ve downloaded stylebot and it looks different to what you have. I’ve got lots of css code – is there a way of backing it up incase I ruin it. Not sure what to change in here.
I’m so close yet so far! I’ve downloaded stylebot and it looks different to what you have. I’ve got lots of css code – is there a way of backing it up incase I ruin it. Not sure what to change in here.
Thank you very much for this. Very useful feature to have.
Thanks for the fix!
Hey guys, i’ve got a question about the slider option in the gallery module. Is there a way to keep the module a fixed size? My portrait images extends the height of the gallery too much. Can the portrait image by resized/minimised to fit the height of the landscape images?
This is great, thank you! Is there any way to disable this on mobile? It looks great on my laptop but on mobile I just see squares with images being reduced to fit inside, even if that means that a quarter of the square is empty.
Does this work with a full width portfolio, as well?
I’m trying to figure out that as well. I downloaded Stylebot and entered the code, but the image did change.
I like this solution. Would I be able to use this to make the portfolio grid images square as well as larger overall? How would that be done?
Many thanks. New to this all.
Hi Stephen,
Great solution! This also works if you only want to change the Divi image gallery Grid view aspect ratio. I wanted mine square so used:
.et_pb_grid_item .et_pb_gallery_image {
padding-top:100%;
}
.et_pb_grid_item img {
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
I would note for anyone who gets confused about the comment at around 1:20 in the video, about other elements being inside the same container as the image, I think I am right in saying that this refers to elements that are not positioned absolute or that are purely containers or wrappers themselves such as anchors.
I say this as in your example the overlay is still inside the target container which might confuse people, but it also is positioned absolutely so is not a problem.
In the image gallery situation the anchor is also inside the target container, but is just a wrapper so also is not an issue.
Thanks again for this great solution!
Hi Stephen
What about a Masonry effect, where you keep the image uncropped and alle the images nicely stacked. Is that possible?
Sincerely Kenneth
absolutely brilliant SJ!
thanks.
I should add, this also works with the Divi Gallery.
.et_pb_gallery_image {
padding-top: 100%;
}
.et_pb_gallery_image img {
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
hey, yes 🙂 It will work on any image that has it’s own container which is really handy!