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

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 change the Divi portfolio image aspect ratio
change the Divi portfolio image aspect ratio square
/*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;
}
change the Divi portfolio image aspect ratio landscape 16-9
/*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;
}
change the Divi portfolio image aspect ratio landscape 4-3
/*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;
}
change the Divi portfolio image aspect ratio landscape 3-2
/*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;
}
change the Divi portfolio image aspect ratio portrait 9-16
/*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;
}
change the Divi portfolio image aspect ratio portrait 3-4
/*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;
}
change the Divi portfolio image aspect ratio portrait 2-3
/*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 Jan 3, 2021 @ 1:34 pm

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

26 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

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart