Use Any Image Size or Shape In The Divi Blog Module!
Change Divi Blog Images to Square or Any Other Proportion
Welcome to our fourth and final (we think) tutorial in our “change image aspect ratio” series. Today, we will be using the same math, same code, and the same process as before to change the Divi Blog Module featured 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 easily understand how this works!
Explanation & Calculations
How To Force Divi Blog 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 Blog Module featured image 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 Blog 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