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.

You're trying to maintain image position across screen sizes in Webflow without relying on one large image. To achieve responsive consistency, focus on the image's wrapper (container), position settings, and layout model (Flex/Grid).

1. Use a Consistent Layout Structure

• Wrap your image in a div block and treat that div as the unit you'd like to control.
• Use Flexbox or Grid to manage responsiveness. These layouts keep elements aligned correctly as screen sizes change.
• Avoid relying only on fixed % or VW/VH for positioning—combining layout + container settings provides more predictable results.

2. Set Image as a Background (If Positioning Is Critical)

• If the image is decorative or must stay pinned in a spot (like a hero section), place it in a div block as a Background Image.
• Apply Position: Absolute or Fixed to the div and set top/left/right/bottom with px, em, or VW/VH for fine control.
• On the parent container, set Position: Relative to contain the image's placement.

3. Use Proper Sizing Options

• If using an <img> element directly:
• Set object-fit: cover or contain depending on the desired cropping/fit.
• Set width to 100% and height to auto to maintain proportions.
• Avoid mixing conflicting units like VW with % or REM without careful scale testing.

4. Apply Media Queries (Breakpoints)

• Webflow allows custom breakpoints; use them to adjust position or margin/padding slightly at different screen sizes.
• If extra tweaks are needed, create a duplicated element that's only visible on specific breakpoints, and hide it on others using Display: None.

5. Use Transform-Positioning for Fine-Tuning

• Add a Transform > Move interaction at different breakpoints to adjust image position more precisely without layout shift.
• This helps when visual alignment needs to be pixel-perfect but can’t be achieved with standard margins.

Summary

To maintain image position across sizes in Webflow: use a reliable layout model like Flex/Grid, attach the image to a wrapper, use background positioning or consistent width settings, and apply media query adjustments if needed. Avoid a single large image by using scalable dimensions and smart layout containers.