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 element inside a Div Block with defined width and height.
- Set the image’s width and height to 100% and apply Object Fit: Cover to make it fill the div while preserving its aspect ratio.
To make an image cover the full area of a div using the "Fill" > "Cover" approach in Webflow without using a background image, you'll need to apply settings directly to the <img> element using CSS. Here’s how to do it:
1. Use an Image Element Inside the Div
- Drag a Div Block onto the canvas.
- Optionally, give it a class name (e.g.,
image-wrapper). - Drag an Image element inside the Div Block.
- Select an image from your assets or upload one.
2. Set the Div Block Sizing and Overflow
- Set width and height of the Div Block (e.g., 300px by 200px, or set using % or viewport units).
- Under Layout, set
Position: Relative(optional but useful if you use absolute positioning on the image). - If needed, set Overflow: Hidden to crop any excess image content.
3. Adjust the Image Styling
- Select the Image element and give it a class (e.g.,
cover-image). - In Size, set:
- Width: 100%
- Height: 100%
- Under Fit, choose Cover from the dropdown.
4. Optional Fine-Tuning
- If the image appears off-center, you can adjust object-position:
- Go to Style panel > scroll to Object Fit settings.
- Click the icon next to Cover to adjust Position (e.g., center, top, left).
Summary
To make an image "cover" a div without using a background image in Webflow, set the image element’s width and height to 100%, then choose Object Fit: Cover. This ensures the image fills the div while maintaining its aspect ratio, cropping as needed.