How to Force Divi Blurb Images into a Fixed Size Ratio

August 9, 2024

Written by Ally Nagle

Ally is the owner and lead web designer of Idolize Design, LLC - locally owned and operated in Wilmington, Delaware. She's been active in the digital design world since 2006 and has degrees in Business Management, Media Design and Life Coaching.

1:1 Square Image:

Screenshot
  1. Add class “pa-blurb-image-1-1” to the Divi Blurb Module CSS class box.
  2. 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

Screenshot
  1. Add class “pa-blurb-image-3-4” to the Divi Blurb Module CSS class box.
  2. 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

Screenshot
  1. Add class “pa-blurb-image-3-2” to the Divi Blurb Module CSS class box.
  2. 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

Submit a Comment

Your email address will not be published. Required fields are marked *

You Might Also Like…

Work With Us

&

Get a Quote

302.330.8857

Located in Garnet Valley, PA

Send us a message

Idolize Design, LLC © 2026 | All rights reserved.