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 se

landscape-16-9.css

/*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-3-2.css

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

landscape-4-3.css

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

portrait-3-4.css

/*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-9-16.css

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

portrait2-3.css

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

square-1-1.css

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