How can I keep images in the same position when resizing in Webflow without using one large image? I have tried using %, VH, and VW, and have reached out to Webflow for support. Can someone please assist with this issue? Thank you.
TL;DR
- Wrap images in Flexbox or Grid containers with defined dimensions and alignment to anchor their position across screen sizes.
- Set image dimensions using auto, max-width, or Webflow’s responsive controls instead of % or VW/VH units.
- Use Absolute positioning only inside Relative parents and avoid percent-based widths when doing so.
- Maintain image aspect ratios by placing them in aspect-ratio divs with object-fit settings.
- Adjust settings at Webflow breakpoints to fine-tune layout across devices.
- When using CMS collections, place images in styled wrappers to control layout and behavior.
You're trying to keep images consistently positioned and scaled across different screen sizes in Webflow without relying on one large image or inconsistent units like %, VH, or VW. Here’s how to solve this with layout settings and best practices.
1. Use Flexbox or Grid for Stable Layouts
- Avoid placing images with only size/position settings (using % or VW/VH alone) — this can cause images to shift unpredictably on different screen sizes.
- Instead, wrap images inside a flexbox or grid parent:
- Select a Section or Div Block, give it a defined width (e.g., 100%) and height (e.g., auto or min-height).
- Apply flex layout (e.g., Flex Row or Flex Column) and set alignment options (Justify Center, Align Center) based on your needs.
- This ensures the image remains anchored in a stable position even when resizing.
2. Define Image Size Responsively (Not in % or VW/VH Alone)
- Use auto/contain for height/width settings if preserving aspect ratio is important:
- Set width: auto and height: 100% of the parent container (or vice versa), or set max-width: 100% with height: auto.
- Better yet, use Webflow’s responsive image controls, and let Webflow automatically generate image sizes via
srcset.
3. Use Absolute Positioning Only When Necessary
- If images need to be in exact places (like in a mockup or overlay), set the parent div’s position to Relative, and the image’s position to Absolute with top/left/right/bottom properties.
- Avoid mixing absolute with % widths — it can lead to unpredictable results when scaling.
4. Consider Containing Images in Fixed Aspect Ratio Boxes
- To maintain orientation and position:
- Create a parent div with a set aspect ratio using padding (e.g., set padding-bottom to 56.25% for 16:9).
- Place the image inside that div with position: absolute and
object-fit: coverorcontain. - This keeps the image stable in layout and size across breakpoints.
5. Use Breakpoints to Adjust as Needed
- For complex layouts, tweak image settings at different Webflow breakpoints manually:
- Adjust image size or positioning in Tablet, Mobile Landscape, and Mobile Portrait views.
- This ensures no major shift in position, even across extreme resolutions.
6. If You're Using a Collection (CMS), Use Image Field Settings
- In CMS collections, make sure:
- Images are not set to "stretch" unexpectedly.
- The CMS image field is correctly placed within a div or wrapper that defines layout.
Summary
To keep image positions stable in responsive designs: use Flexbox or Grid for consistent image placement, avoid relying solely on % or VW/VH units, and define image behavior within clear containers. Use responsive settings and breakpoints as needed to refine layout across devices.