How can I ensure an image stays within its DIV without distorting its aspect ratio in Webflow?
TL;DR
- Set the image's width or height to
100%, keeping the other as auto to maintain aspect ratio. - Use
object-fit: coverto ensure proper cropping without distortion. - Wrap the image in a responsive div with appropriate sizing and overflow: hidden if needed.
- Apply flexbox to the div for centering alignment if necessary.
To ensure an image stays within its DIV without distorting its aspect ratio in Webflow, use flexible sizing and proper object-fit settings.
1. Set the Image to 100% Width or Height
- Select the image in the Designer.
- Under the Style panel, set either:
- Width to
100%(if you want it to fill the width of the div) or - Height to
100%(if you want it to fill the height of the div). - Leave the other dimension as auto to maintain the aspect ratio.
2. Use object-fit for Proper Cropping
- Locate the Fit setting under the Style panel.
- Set “Object-fit” to
coverto expand the image while maintaining aspect ratio. - Alternative options:
contain– Ensures the entire image is visible but may leave empty space.fill– Stretches the image and can distort its aspect ratio.none– Keeps the original resolution but may cause cropping issues.
3. Wrap the Image in a Responsive Div
- Place the image inside a div container.
- Set the div’s width and height based on your needs (e.g., percentages or
vh/vwunits). - Apply overflow: hidden to prevent overflow issues if needed.
4. Use Flexbox for Centering (If Necessary)
- If the image isn't aligned properly, apply Display: Flex to the div.
- Set Align: Center and Justify: Center to keep the image centered.
Summary
To prevent distortion while keeping an image inside its div, use object-fit: cover and set one dimension to 100% while keeping the other as auto. Wrapping it in a responsive div and using flexbox can further improve layout control.