How do I use the "Fill" - "Cover" option in Webflow to fit an image within a div block without resorting to a background image?
TL;DR
- Place an image inside a fixed-size div, set the image’s width and height to 100%.
- Apply object-fit: cover to make the image fully cover the div while preserving its aspect ratio.
To make an image element fill and cover a div block like a background image with background-size: cover, you need to use the object-fit: cover property on the image. Here's how to do it in Webflow.
1. Place Your Image Inside a Div Block
- Drag a Div Block onto the canvas.
- Set a fixed width and height on the Div Block (e.g. 300px by 200px) so the image knows what dimensions to cover.
- Drag an Image element inside the Div Block.
2. Make the Image Fill the Div
- Select the Image element.
- Set its Width: 100% and Height: 100% so it expands to fill its parent div.
3. Apply Object Fit: Cover
- With the Image still selected, go to the Style panel.
- Under the Layout section, set Object Fit to “Cover.”
- Ensure Display is set to Block (optional, avoids inline spacing issues).
Summary
To replicate the “Fill – Cover” effect for an image element, set the image's width and height to 100%, and apply object-fit: cover. This allows the image to fill the div completely while maintaining aspect ratio—just like a background image with cover.
