1:1 Square Image:

- Add class “pa-blurb-image-1-1” to the Divi Blurb Module CSS class box.
- Paste this custom css:
/*Blurb image aspect ratio square 1:1 without image crop*/
.et_pb_blurb.pa-blurb-image-1-1 .et_pb_main_blurb_image {
display: block;
position: relative; /* needed for blurb module image */
}
.et_pb_blurb.pa-blurb-image-1-1 .et_pb_image_wrap {
padding-top: 100%;
}
.et_pb_blurb.pa-blurb-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;
}
3:4 Portrait Orientation

- Add class “pa-blurb-image-3-4” to the Divi Blurb Module CSS class box.
- Paste this custom css:
/*Blurb image aspect ratio portrait 3:4 without image crop*/
.et_pb_blurb.pa-blurb-image-3-4 .et_pb_main_blurb_image {
display: block;
position: relative; /* needed for blurb module image */
}
.et_pb_blurb.pa-blurb-image-3-4 .et_pb_image_wrap {
padding-top: 133.33%;
}
.et_pb_blurb.pa-blurb-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;
}
3:2 Landscape Orientation

- Add class “pa-blurb-image-3-2” to the Divi Blurb Module CSS class box.
- Paste this custom css:
/*Blurb image aspect ratio landscape 3:2 without image crop*/
.et_pb_blurb.pa-blurb-image-3-2 .et_pb_main_blurb_image {
display: block;
position: relative; /* needed for blurb module image */
}
.et_pb_blurb.pa-blurb-image-3-2 .et_pb_image_wrap {
padding-top: 66.66%;
}
.et_pb_blurb.pa-blurb-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;
}



0 Comments