Divi 5 adds three image-related upgrades that work together: a new Aspect Ratio field in the Sizing option group, a new Fit option group for Image Framing, and full preset support for the Image option group. Every image option group across Divi 5 modules has also been harmonized, so the same controls appear in the same place in every module that displays an image.
This article explains where each setting lives, what it does, and when to reach for it. The modules most affected are the Image Module, Person Module, Blurb Module, and Woo Product Images Module, but the changes apply to every Divi 5 module that displays an image.
[Screenshot: Side-by-side of the same Divi page before and after applying an aspect ratio, framing, and image preset]
Where to Find These Settings
Aspect Ratio: Module Settings → Design → Sizing → Aspect Ratio.
Image Framing (Fit): Module Settings → Design → Framing on the Image Module, or Module Settings → Design → Image → Framing when the image is a sub-element inside a module like Person or Blurb.
Image Presets: open the preset chip at the top of the Image option group inside any module that displays an image.
Aspect Ratio
The new Aspect Ratio field sets a proportional relationship between an element's width and its height. Define a ratio once, and Divi keeps that proportion as the element scales across phones, tablets, and desktops.
How to Set an Aspect Ratio
Open the module settings and go to Design → Sizing.
Locate the Aspect Ratio field.
Enter a ratio in W:H format, such as
16:9for widescreen,1:1for square, or4:5for portrait.Save your changes.
⚠︎ Note: Aspect Ratio defines proportional height based on the element's rendered width. When the parent container changes width on smaller screens, the height adjusts automatically to keep the ratio.
Common Aspect Ratios
16:9: Widescreen video, hero images, and YouTube-style thumbnails.
4:3: Classic photo prints and slideshow images.
1:1: Square images for galleries, social cards, and avatar-style cards.
3:4 or 4:5: Portrait-oriented product photos and team headshots.
21:9: Cinematic banners.
For full coverage of every field in this option group, see Understanding the Sizing Option Group in Divi 5.
Framing
When you set an aspect ratio - or any explicit width and height - on an image, the image stretches to fill that frame by default. Without framing controls, this distorts the picture. The new Framing option group lets you decide how the image fills its frame and where inside the frame it sits.
Object Fit
Object Fit controls how the image fills the frame defined by your aspect ratio, width, or height. Choose one of five values:
Fill (default): Stretches the image to fill the frame. May distort the image.
Contain: Scales the image so the whole image is visible inside the frame. May leave empty space on two sides (letterboxing).
Cover: Scales the image so it completely fills the frame, cropping the parts that don't fit. The image's proportions are preserved.
None: Displays the image at its intrinsic size with no scaling. The frame may crop or leave empty space depending on the image's original dimensions.
Scale Down: Behaves like None if the image is smaller than the frame, or like Contain if it's larger.
⚠︎ Note: Object Fit only has a visible effect when the image's rendered size differs from its intrinsic size. That usually means you have set an Aspect Ratio, or both a custom Width and Height in the Sizing option group.
Object Position
Object Position controls which part of the image stays visible when Object Fit crops it. Use the position selector to anchor the image to a corner, edge, or center of the frame, or enter custom horizontal and vertical values for precise placement.
The nine preset positions are Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, and Bottom Right. For custom placement, enter percentage values for the X and Y axes.
Where Framing Lives in Each Module
Image Module: Design → Framing.
Person Module: Design → Image → Framing.
Blurb Module (when using an image instead of an icon): Design → Image → Framing.
Woo Product Images Module: Design → Framing.
For more on how nested option groups like this one work, see Composable Settings in Divi 5.
Image Presets
The Image option group now supports presets, just like the Button, Text, and other option groups already do. Build a preset once with the rounded corners, border, shadow, filters, and framing you want, then apply it to every image on your site. Update the preset, and every image that uses it updates in a single step.
How to Create an Image Preset
Open any module that displays an image.
Go to Design → Image (or Design → Image & Icon in modules that use that group).
Style the image the way you want it: corners, border, shadow, filters, and Framing settings.
Click the preset chip at the top of the Image option group.
Choose Save As Preset.
Name the preset something descriptive, such as Brand Card Image or Polaroid.
How to Apply an Image Preset
Open a module that displays an image.
Go to Design → Image.
Click the preset chip and choose your saved preset from the list.
How to Update or Reset a Preset
Update: open a module that uses the preset, change the image styles, click the preset chip, and choose Update Preset. Every other image using that preset updates at the same time.
Reset: click the preset chip and choose Reset to remove the preset from the current module without changing the preset itself.
For deeper coverage of how presets work across Divi 5, see How to Use Option Group Presets in Divi 5 and Preset Manager and Preset Preview Systems in Divi 5.
Image Settings Harmony and Composable Settings
Every image option group across Divi 5 modules now exposes the same set of design options. The Image Module, Person Module, Blurb Module, Woo Product Images Module, and any other module that displays an image use the same controls in the same place.
All image option groups also support composable settings. That means any sub-element of a module - including the image - can use Divi's full design suite without writing custom CSS. For more on this, see Composable Settings in Divi 5.
Tips for Using These Settings
Pair Aspect Ratio with Object Fit Cover when site contributors upload images of different sizes. Cover crops cleanly to your ratio instead of stretching the image.
Save a site-wide Image Preset early so brand styles stay consistent across every module that displays an image.
Set framing inside the Loop Builder template when you display images in a loop. Every loop item picks up the same aspect ratio and crop, so the grids line up perfectly. See Build Custom Loops using Loop Builder in Divi 5.
Use Object Position to keep faces visible when cropping headshots. Anchor the image to Top Center, so heads are not trimmed at the top of the frame.
Frequently Asked Questions
I set Object Fit, but my image looks the same. Why?
I set Object Fit, but my image looks the same. Why?
A: Object Fit only has a visible effect when the image's rendered size differs from its intrinsic size. Set an Aspect Ratio, or both a custom Width and Height in the Sizing option group, and the Fit settings will take over.
Where do I edit an Image Preset after I've saved it?
Where do I edit an Image Preset after I've saved it?
Open any module that uses the preset, change the image styles, click the preset chip, and choose Update Preset. You can also manage every preset from the Preset Manager.
Does this affect WooCommerce product images?
Does this affect WooCommerce product images?
Yes. The Woo Product Images Module uses the same harmonized Image option group and the new Fit option group, so aspect ratio, framing, and presets all apply to product photography.
Will applying an Aspect Ratio crop my image?
Will applying an Aspect Ratio crop my image?
Not by itself. Aspect Ratio sets the frame. Whether the image is cropped or letterboxed depends on the Object Fit value you choose. Use Cover to crop, Contain to letterbox, or Fill to stretch.