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 div with defined size, and set the image to 100% width and height.
- Apply object-fit: cover and optionally object-position: center to make the image fill and crop like a background cover.
To ensure an image within a div block fills the container using the “Cover” behavior—similar to background images—while using the actual <img> element (not a background), follow these steps:
1. Use an Image Element Inside a Div
- Drag a Div Block into your canvas and size it as needed (fixed width/height or responsive with % or viewport units).
- Place an Image element inside the Div (not as a background).
2. Set the Div to Use Relative or Static Position (Default)
- Ensure the Div Block has Display: Block or Flex, and its Position can remain at the default Static or changed to Relative if layering other elements.
3. Apply Required Image Styling
- Select the Image element, and apply the following:
- Width:
100% - Height:
100% - Object-fit: Cover
- Display:
Block(to avoid extra bottom spacing)
This makes the image fill the parent div proportionally, cropping where necessary—just like a background set to Cover.
4. Optional: Contain or Center the Image
If your image seems off-center due to cropping:
- Add Object-position: Center to the image to center it horizontally and vertically inside the container.
5. Don't Forget: Set Div’s Explicit Dimensions
The effect won’t be visible if the parent div doesn't have a defined size. You must:
- Set a fixed height for the Div (e.g.,
400px), or - Set a responsive height using
vw,vh, or aspect ratios using padding trick or auto layout.
Summary
To mimic background "Cover" behavior using an image tag in Webflow, set the image to width 100%, height 100%, and apply Object-fit: Cover. Ensure the parent div has defined dimensions so the image knows what to fill.