How can I ensure an image stays within its DIV without distorting its aspect ratio in Webflow?

To ensure an image stays within its DIV without distorting its aspect ratio in Webflow, you need to control both the container and the image's size and fit behavior.

1. Set the DIV Container’s Size

• Select the parent DIV that holds the image.
• In the Style panel, define a specific width and/or height—or use relative units like % or vh/vw depending on your layout.
• Make sure Overflow is set to Hidden if you want to crop overflow content (optional).

2. Configure Image Fill Behavior

• Select the Image element inside the DIV.
• Under Sizing, set:
• Width: 100%
• Height: 100% (if you want it to fill both dimensions of the container)
• Under the Object Fit setting (available when the image is a Background Image of a DIV or if the image is set as an image tag with custom styling), choose Cover or Contain:
• Cover: Keeps aspect ratio, fills the container, might crop edges.
• Contain: Keeps aspect ratio, fits entire image within container, may leave empty space.

3. Use Image as a Background (for more control)

• Instead of using an Image element, set an image as a Background of a DIV.
• In the Style panel, under Backgrounds:
• Add an image URL or upload your image.
• Set Background Size to Cover (or Contain as needed).
• Set Background Position to Center.
• Set Background Repeat to No Repeat.

4. Avoid Fixed Pixel Sizes for Images

• Avoid setting fixed Width and Height on the image itself unless required.
• Let the container control sizing, and the image adapt through object-fit or background size.

Summary

To keep an image inside its DIV without distortion, control the container dimensions and set the image’s object-fit to Cover or Contain, or use a DIV with a background image styled accordingly. Both methods maintain the image's original aspect ratio.