Code by Day | Explore By Weekend

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;
}
11
Last updated Jan 3, 2021 @ 1:34 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
16 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Gil Poulsen
9 months ago

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… Read more »

Gil Poulsen

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

Reed Robbins
Reed Robbins
8 months ago

Thanks so much, Nelson – it worked perfectly!

Facundo
Facundo
7 months ago

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

Chad Ballantyne
6 months ago

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?

Last edited 6 months ago by Chad Ballantyne
Terry Houlding
Terry Houlding
4 months ago

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

Laura Nicol
Laura Nicol
4 months ago

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

image css.PNG
Annie
4 months ago

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?

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart