This Is Going To Be Fun One!
Math + CSS + Photography = Fun! 🙂
When I was designing my Divi Paving Child Theme, I needed three images to be the same proportion no matter what size the end user uploaded, since they may not be as familiar with how to adjust that in Photoshop. So I thought I’d share with all my great Divi friends how to do this too!
▶️ Please watch the video above to get all the exciting details! 👆
Explanation & Calculations
How To Force Change 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 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 formular for other sizes as well!
NOTE: We just found out if the image link is set to open in a lightbox this will not work. However, this is uncommon and we will look for a solution.
Examples & CSS Snippets
NOTE: Always be sure to add the correct class to the image module for your desired aspect ratio. In this tutorial, I kept it very simple! 🙂 (Just take out the dot at the beginning.)
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Square 1:1
/*image aspect ratio square 1:1*/
.pa-image-1-1 .et_pb_image_wrap {
padding-top: 100%;
display: block;
}
.pa-image-1-1 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 16:9
/*image aspect ratio landscape 16:9*/
.pa-image-16-9 .et_pb_image_wrap {
padding-top: 56.25%;
display: block;
}
.pa-image-16-9 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 4:3
/*image aspect ratio landscape 4:3*/
.pa-image-4-3 .et_pb_image_wrap {
padding-top: 75%;
display: block;
}
.pa-image-4-3 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 3:2
/*image aspect ratio landscape 3:2*/
.pa-image-3-2 .et_pb_image_wrap {
padding-top: 66.66%;
display: block;
}
.pa-image-3-2 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 9:16
/*image aspect ratio landscape 9:16*/
.pa-image-9-16 .et_pb_image_wrap {
padding-top: 177.77%;
display: block;
}
.pa-image-9-16 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 3:4
/*image aspect ratio landscape 3:4*/
.pa-image-3-4 .et_pb_image_wrap {
padding-top: 133.33%;
display: block;
}
.pa-image-3-4 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 2:3
/*image aspect ratio landscape 2:3*/
.pa-image-2-3 .et_pb_image_wrap {
padding-top: 150%;
display: block;
}
.pa-image-2-3 .et_pb_image_wrap img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Like these photos?
Join us on Instagram!
Those images were all taken by myself in Pennsylvania. If you happen to like that sort of thing, follow my Instagram pages for more photos!
Very nice way to solve a simple problem. Thank you.
You’re welcome!
Can’t seem to get it to work on certain blurb images.
I’ve added the class ‘.ookinteressant’
.ookinteressant .et_pb_main_blurb_image a {
padding-top: 60%;
display: block;
}
.ookinteressant .et_pb_main_blurb_image a img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
but it doesn’t seem to work.
See: https://dev.ernstdejong.nl/ouders/wat-is-passend-onderwijs/ bottom of page
Hi Ernst,
I am afraid that this guide is the one that works for the Image Module and not the Blurb and that’s why you are facing the issue.