Setting Object Fit in Divi Image Module

Divi is a popular tool to create a website with WordPress. With Divi, you can get your website project done more quickly thanks to its visual editor. If you are an agency or freelancer, Divi is a perfect Elementor alternative as you can create unlimited websites using a single license.

The visual editor of Divi comes with useful design elements (called modules) you can make use of to create a page. Each module also comes with built-in styling options. One of modules offered by Divi visual editor is Image. The module -- as you can guess -- is aimed at adding image element to your page.

The Image module of Divi comes with some styling options such as CSS filters, box-shadow, border, and so on. Of course, you can also set the size of image by setting the heigh and width.

A setting option that is not available in Divi Image module is object-fit. This setting is quite useful, especially to create a rounded image. A little CSS snippet is required to apply object fit in Divi.

Setting Object Fit in Divi Image Module

CSS has a property called object-fit which you can use to resize an object (image and video) to fit its container. However, the implementation is a bit more complex in Divi -- compared to Elementor -- as Divi doesn't allow you to use the class selector on an individual module (read my previous post to learn how to use CSS selector in Elementor).

So, how to set the object fit of the Image module in Divi?

First, add the Image module just like usual and set the width and the height. Once done, click the gear icon on the bottom side to open the page settings panel. On this panel, go to the Advanced tab.

Next, add the following CSS snippet to the CSS editor (the Custom CSS field).

.et_pb_image img{
object-fit: cover;
}

You can replace the object-fit value to your liking. The object-fit property itself supports the following values:

• fill: image is forced to fill the entire container area
• contain: image is displayed in the original aspect ratio
• cover: image is also fill the entire container area, but only the certain portion according to the

Don't forget to click the green checklist icon to apply the change.

The above method will apply the object fit to all Image modules on the same page. If you want to target a specific Image module, you can add an ID selector to the above snippet. The snippet will be:

#yourclasshere .et_pb_image img{
object-fit: cover;
}

Next, edit a column belong to the Image module you want to apply the object fit to and add your CSS ID on the Advanced tab on the settings panel.

That's it. You can publish your page once done editing it.