Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Change the Divi Portfolio Image Aspect Ratio – Make Featured Images Square or Any Size

Nelson Miller Profile Orange
In this tutorial, I'm going to share some handy CSS snippets to change the Divi portfolio or filterable portfolio featured image aspect ratio. This will be fun!

▶️ Please watch the video above to get all the exciting details! 👆

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 portfolio use the original uploaded image aspect ratio instead.

How To Stop Image Crop In The Divi Blog Portfolio Gallery Modules Tutorial by Pee Aye Creative
How to change the Divi portfolio image aspect ratio

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

How to change the Divi portfolio image aspect ratio
/*porfolio image aspect ratio square 1:1*/

.pa-portfolio-image-1-1 .et_portfolio_image {
  padding-top: 100%;
  display: block;
}

.pa-portfolio-image-1-1 .et_portfolio_image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
How to change the Divi portfolio image aspect ratio
/*portfolio image aspect ratio landscape 16:9*/

.pa-portfolio-image-16-9 .et_portfolio_image {
  padding-top: 56.25%;
  display: block;
}

.pa-portfolio-image-16-9 .et_portfolio_image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
How to change the Divi portfolio image aspect ratio
/*portfolio image aspect ratio landscape 4:3*/

.pa-portfolio-image-4-3 .et_portfolio_image {
  padding-top: 75%;
  display: block;
}

.pa-portfolio-image-4-3 .et_portfolio_image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
How to change the Divi portfolio image aspect ratio
/*portfolio image aspect ratio landscape 3:2*/

.pa-portfolio-image-3-2 .et_portfolio_image {
  padding-top: 66.66%;
  display: block;
}

.pa-portfolio-image-3-2 .et_portfolio_image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
How to change the Divi portfolio image aspect ratio
/*portfolio image aspect ratio portrait 9:16*/

.pa-portfolio-image-9-16 .et_portfolio_image {
  padding-top: 177.77%;
  display: block;
}

.pa-portfolio-image-9-16 .et_portfolio_image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
How to change the Divi portfolio image aspect ratio
/*portfolio image aspect ratio portrait 3:4*/

.pa-portfolio-image-3-4 .et_portfolio_image {
  padding-top: 133.33%;
  display: block;
}

.pa-portfolio-image-3-4 .et_portfolio_image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
How to change the Divi portfolio image aspect ratio
/*portfolio image aspect ratio portrait 2:3*/

.pa-portfolio-image-2-3 .et_portfolio_image {
  padding-top: 150%;
  display: block;
}

.pa-portfolio-image-2-3 .et_portfolio_image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

34 Comments

Comments By Others

  1. Gretel

    Hi Nelson and thank you so much for that super cool tutorial. It’s exactly what I was looking for.
    One question please regarding the grid portfolio overview: On the Divi page I am working all featured portfolio images are portraits of people in portrait format. When I use them in 4:3 it cuts off all foreheads, sometimes even the eyes. Is there an option to realise that 4.3 aspect ratio, but move all images in their container slightly downwards?

    Thank you very much for your help!

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Gretel!

      Can you please share the URL of the page so that I can provide the exact code as per the module?

      Reply
  2. nad

    Hi. Thank you so much for this, it’s been really helpful. But I have a problem which i hope you can help with. I have been trying to fiddle around with css, but nothing is working. I have a page with movie posters, and even though the posters are the same aspect ratio as the container, some of photos still displayed zoomed in. I dont know what to dooo…. Hope you can help

    Reply
  3. Fredrik

    Hi!

    I want to display book covers in my filterable portfolio, i.e. images with different widths and heights.

    How do I display them in a grid where the height is set (300px for example), but the width is determined by the image width?

    Hopefully, that was clear enough! 🙂

    /Fredrik

    Reply
  4. Carina

    Hi Nelson, thank you so much for the tutorial, it worked great!
    I’m trying to make it work for mobile and tablet view as well. Do you know how to do that in Divi? I’m new to Divi and not sure if I’m looking in the right place or if the code needs to be edited.

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Carina!

      If you want a different properties for tablet and mobile, then you can add the code in media query @media all and (max-width: 980px)

      Example:

      @media all and (max-width: 980px){
      .pa-portfolio-image-1-1 .et_portfolio_image {
      padding-top: 100%;
      display: block;
      }
      .pa-portfolio-image-1-1 .et_portfolio_image img {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      object-fit: cover;}
      }

      Let me know how it goes!

      Reply
  5. Victoria

    Hi Nelson!Thank you very much for the video! 🙂
    I have designed the portfolio with three columns and at 3:4 with your tutorials!

    But the images lose a bit of resolution. Is there any way to fix it?

    Thanks 🙂 🙂

    Reply
  6. Alex

    Cool
    But how about 16:10? can you write code?

    Reply
  7. Chad Ballantyne

    The ratio of the shape/frame changes great – square. How do we make it work for photos. They seem to zoom in and are still cropped.I’d like to display the photos as squares but allowing the photo to fit perfectly. no cropping.

    Reply
  8. Fred

    Hi Nelson,
    Thanks for the tutorial. Looks great.
    How would you suggest editing the code to make the images opacity change on hover?
    Cheers!
    Fred.

    Reply
  9. Annie

    Hi Nelson, your css worked perfectly for my portfoglioimages. I wanted them square so that was great. Now I just see them a bit big. Could that be solved by some more css. I just want them about 30% smaller. How do I do that?

    Reply
  10. Laura Nicol

    Hi, I have tired this however the CSS box isn’t one box but has various sections – so I went for the ‘portfolio image’ section. However it doesn’t work and after line 3 red text saying EXPECTED RBRACE, and after line 17 UNEXPECTED TOKEN (}).
    I have no coding experience! Please could you help?
    Thanks

    Reply
  11. Terry Houlding

    Hi Nelson, Im trying to force the aspect ratio to the DIVI shop page product thumbnails however, the code always returns an ‘Expected RBRACE’ error after .pa-portfolio-image-16-9 .et_portfolio_image {

    And an Unexpected token just after the final RBRACE itself.

    Any help would be much appreciated thanks

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Terry,
      This code would need to be modified to work for product images. You would need to target those and change out the .et_portfolio_image. Not sure why your code isn’t working though, if you are putting it in Divi Theme Options.

      Reply
  12. Chad Ballantyne

    The changing of ratio worked, but the images placed seem to not
    snap to fit. Is there something else to be added to force the photos to show as much of the image as possible while staying within the frame of the new sized ratio?

    Reply
  13. Facundo

    Hi Nelson!
    I love your tutorials! And this was just what I was looking for.
    I am creating a section with magazines so I am using the ratio 2: 3 so that they can see my projects as magazines in 4 columns. But when I apply the CSS in the filterable portfolio, the images expand and become very large and the image is completely cut off. What I can do?
    Thank you

    Reply
  14. Reed Robbins

    Thanks so much, Nelson – it worked perfectly!

    Reply
  15. Gil Poulsen

    HI, Nelson. Just want to add my $0.02 here, we are using images that are already square for the projects in a full-width portfolio and using the full-width portfolio on a page in carousel mode, and of course the images were stretched horizontally by default and looked awful. I was able to use your CSS as a guide, but could not get it to work fully. What I finally ended up with was this:

    .et_pb_portfolio_image.landscape {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    }

    Using 80% was the only thing I could do to get the images to be square, but then they were all shifted to the left so the carousel itself appeared to be off-center. Adding the “margin: auto”s centered the images and it looks pretty much like what we wanted.

    Your CSS makes perfect sense to me and should have worked… It also seems the CSS selector has changed from .et_portfolio_image to .et_pb_portfolio_image.landscape. Anyway, just wanted to add this in case it helps anyone, and thanks for all these posts and videos, they are really helpful.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Gil,
      You said you are using the Fullwidth Portfolio. My tutorial is for the Portfolio and Filterable Portfolio. I personally dislike anything with the name “Fullwidth” because they are outdated and lack essential features, and now with the sizing options in the regular modules they are essentially depreciated. But yes, if someone wants to use that, this will help.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart