How to change the Divi portfolio image size and aspect ratio tutorial by Pee-Aye Creative.png

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

Nelson Miller Pee Aye Creative
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!

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

Last updated [last-modified %date%]

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

30 Comments

  1. 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)

      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
      • Gil Poulsen

        Got it. Unfortunately there is no carousel option for the portfolio unless you use the fullwidth version ;-(

      • Nora

        I am using this in a regular and filterable portfolio modules and my images are already square. When I use this, it cuts the top of their heads off. Any idea why?

  2. Reed Robbins

    Thanks so much, Nelson – it worked perfectly!

    Reply
  3. 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
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Facundo,
      I’m not sure what you mean, this method works great. Can you share the link and any details about what you are doing to achieve this?

      Reply
  4. 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
  5. 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)

      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
  6. 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
  7. 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
  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
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Fred,
      You could start with this, very basic, just target the image and add the hover and opacity:

      .et_pb_portfolio_grid .et_pb_portfolio_item img:hover {
      opacity: .5;
      }

      Reply
  9. 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
  10. Alex

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

    Reply
  11. 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
  12. 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

      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
  13. 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

Submit a Comment

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

Recent Posts

0

Your Cart