Use Any Image Size or Shape In The Divi Portfolio Module!
Change Divi Portfolio Images to Square or Any Other Proportion
We have already published two other tutorials in our “change image aspect ration” series, and there is one more to follow after this. In this tutorial, we will be using the same math, same code, and the same process as before to change the Divi Portfolio Module and Divi Filterable Portfolio Module image aspect ratio. You can do this by a snippet of CSS code to your Divi website. Be sure to follow along the video to help you understand it, but it is pretty easy!
Explanation & Calculations
How To Force Divi Image Aspect Ratios
Most of us are familiar with image or video aspect ratios. Lots of times our devices are made to these proportions as well. The first number in the ratio is the width, and the second number is the height. As you can see in the CSS examples below, the CSS trick works with padding and uses a percentage. Basically, the percentage is the height divided by width. To calculate what percentage to use in the CSS for the Divi image gallery item aspect ratios, just use this math formula.
- Divide the second number by the first number
- Move the decimal over two places to the right
- Add a percent sign
Square 1:1 – 1 / 1 = 1.00 = 100%
Landscape 16:9 – 9 / 16 = 0.5625 = 56.25%
Landscape 4:3 – 3 / 4 = 0.75 = 75%
Landscape 3:2 – 2 / 3 = 0.6667 = 66.67%
Portrait 9:16 – 16 /9 = 1.7778 = 177.78%
Portrait 3:4 – 4 / 3 = 1.3334 = 133.34%
Portrait 2:3 – 3 / 2 = 1.5 = 150%
Now you can use this formula for other sizes as well!
Examples & CSS Snippets
NOTE: Always be sure to add the correct class to the Divi Portfolio Module or the Divi Filterable Portfolio Module so that it can change to the desired aspect ratio. In this tutorial, I kept it very simple! (Just take out the period at the beginning.)
As usual, you can copy and paste these CSS snippets into the Divi>Theme Options>Custom CSS box.Â
Square 1:1
Landscape 16:9
Landscape 4:3
Landscape 3:2
Portrait 9:16
Portrait 3:4
Portrait 2:3
Leave a Reply