The visual presentation of your portfolio can significantly impact how visitors perceive your work. In Divi, the Portfolio Module uses the Grid Layout to display the images at a default aspect ratio of 400/250.
Adjusting the aspect ratio of the featured images can enhance the overall aesthetic and ensure that your projects are presented in the best possible light.
This article will guide you through the steps to change the aspect ratio of the featured images displayed by the Portfolio Module.
Open the Portfolio module's setting by clicking on the Gear icon
Go to the Design tab → Layout and choose the Grid option
Go to Advanced Tab → Custom CSS → Free Form CSS and add this CSS code
selector {
--aspect-ratio-width: 16;
--aspect-ratio-height: 9;
--aspect-ratio: calc(var(--aspect-ratio-height) / var(--aspect-ratio-width));
--padding-top: calc(var(--aspect-ratio) * 100%);
}
selector .et_portfolio_image {
padding-top: var(--padding-top);
display: block;
position: relative;
}
selector .et_portfolio_image img {
position: absolute;
aspect-ratio: var(--aspect-ratio-width) / var(--aspect-ratio-height);
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
}
Pro Tip: In the above CSS code, all you need to change is the value of the CSS variables called --aspect-ratio-width and --aspect-ratio-height.
Note: Because the above CSS code uses CSS variables and the calc() function, the syntax checker will flag those as invalid CSS rules. You can safely ignore those.
The result can be seen in the screenshot below:
Aspect Ratio of 1/1 (square)
Aspect Ratio of 16/9
Aspect Ratio of 4/3
Aspect Ratio of 3/2
Aspect Ratio of 9/16
Aspect Ratio of 3/4
Aspect Ratio of 2/3
