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 positioning consistently across screen sizes in Webflow without relying on a single large image. This is a common issue when dealing with responsive image layout and scaling.

1. Use Absolute or Fixed Positioning Carefully

• If your images need to stay locked in specific places regardless of screen size, consider using absolute or fixed positioning, but inside a relative parent container.
• Set the parent container to position: relative, then set the image to position: absolute, and control placement using top, left, right, or bottom in pixels or %.
• This avoids relying on viewport units like vh and vw that can scale unpredictably.

2. Use Containers with Defined Dimensions

• Wrap your image in a Div Block with a known width and height using pixel values or % if proportional scaling is okay.
• If you're aiming for pixel-precise positioning, use pixels instead of responsive units like % or vw/vh.

3. Avoid Using % Width and Height Directly on Images

• Images using % width/height directly can scale unpredictably, especially if their parent containers are shifting sizes.
• Instead, control image size using the wrapper Div, then set the image to width: 100% inside the wrapper.

4. Use Flexbox or Grid for Control

• Consider using Flexbox or Grid layouts to keep multiple elements aligned and in position.
• This ensures that spacing between elements (including images) remains consistent, even as the screen resizes.

5. Use Object Fit and Overflow Strategically

• If the image is within a container (e.g., a hero section), set object-fit: cover or contain depending on the behavior you want.
• cover makes sure the image fills the area without distortion.
• contain ensures the full image is visible but might leave empty space.
• Use overflow: hidden on containers to crop images cleanly if needed.

6. Lock Position with Webflow Breakpoints

• At key breakpoints (Desktop, Tablet, Mobile Portrait, etc.), adjust image position manually and apply classes or combo classes if needed.
• This ensures precise control at each size without relying entirely on responsive units.

Summary

To keep images in fixed positions while resizing in Webflow, wrap them in relative-positioned containers, use absolute positioning with careful use of pixels or % for placement, and optionally employ Flexbox or Grid to maintain layout structure. Avoid scaling directly with viewport units or overly responsive settings that break positioning.