Is it possible to have a background image in a div, set to "cover" and placed within a div set to "overflow hidden", that reacts to different image proportions and fills either the height or width while cropping to the center, using Webflow?
TL;DR
- Create a parent div with a fixed width and height, set
overflow: hidden. - Add a child div inside, set
width: 100%,height: 100%, and apply a background image withcover,center, andno-repeatsettings. - Background image will automatically crop excess width or height while maintaining aspect ratio.
- Alternatively, use an
imgtag withobject-fit: coverandobject-position: centerto achieve the same effect while improving accessibility and SEO.
Yes, you can achieve this effect in Webflow by setting a background image in a div with "cover" and placing it inside a container with "overflow: hidden." This setup ensures the image fills the entire div while maintaining aspect ratio and cropping from the center.
1. Set Up the Parent Div
- Create a div (container-div) that will act as the frame.
- Set a fixed width and height (e.g., 100% width and a specific height like 300px).
- Apply
overflow: hiddento prevent overflow from the child div.
2. Add the Background Image Div
- Create a child div inside the container-div.
- Set its width and height to 100% so it fully covers the parent div.
- Go to Background Settings, choose your image, and set:
- Background-size: Cover (ensures it fills the div without distortion).
- Background-position: Center (keeps the crop centered).
- Background-repeat: No Repeat (prevents tiling).
3. Adjust for Different Image Proportions
- If the image is too wide, Webflow’s cover property will ensure the height is fully covered, cropping excess width.
- If the image is too tall, cover will fill the width while cropping excess height.
- The centering ensures that cropping happens symmetrically.
4. Alternative: Use an Object-Fit Image
- Instead of a background image, you can use an
imgtag inside the div and apply: - Width: 100% and Height: 100%.
- Object-fit: Cover (in the Webflow image settings).
- Object-position: Center (to maintain centering).
- This method can be useful if you need an SEO-friendly, accessible image instead of a background image.
Summary
By using background-size: cover with overflow hidden inside a fixed-ratio container, the image will proportionally fill the space while cropping excess parts from the center. This ensures responsive behavior across different image dimensions. If you prefer, object-fit: cover can accomplish a similar effect for inline images.