Force Divi Image Aspect Ratios – 7 Examples & CSS Snippets

Hey friends, I'm excited to share with you some very helpful CSS snippets to force Divi image aspect ratios. These should be fun!

/*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;
}

/*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;
}

/*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;
}

/*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;
}

/*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;
}

/*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;
}

/*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;
}

Please share this post!

Nelson Lee Miller

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, and building websites with Divi.
0

Your Cart