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.
To keep images in the same position when resizing in Webflow without using one large image, there are a few techniques you can try:
1. Use the Flexbox layout: Flexbox is a powerful CSS layout module that allows you to create flexible and responsive layouts. By utilizing the flexbox properties, you can easily control the positioning of your images. Wrap your images in a container and set its display property to "flex". Then, use the appropriate flexbox properties such as align-items, justify-content, and flex-wrap to achieve the desired positioning.
2. Utilize CSS Grid: Similar to flexbox, CSS Grid is a layout module that provides a more grid-based approach to positioning elements. By creating a grid container and defining rows and columns, you can place your images within the grid to maintain their relative positions while resizing. Make sure to set the appropriate grid properties such as grid-template-columns and grid-template-rows to control the layout.
3. Apply position: absolute: Another option is to use the CSS position property with the value of "absolute" on your images. This positions the images relative to their nearest positioned parent element or the document body if no positioned parent is found. You can then control the exact position using the top, right, bottom, and left properties. However, keep in mind that this might require additional CSS to handle positioning on different screen sizes.
4. Use media queries: If you want to maintain the same image position for specific screen sizes, you can utilize media queries. With media queries, you can define different CSS rules based on the screen size or device. By specifying the desired image positioning properties within each media query, you can ensure consistent image placement across different screen sizes.
Remember to test your layout on different devices and screen sizes to ensure that your images remain in the desired position. By using a combination of these techniques, you should be able to maintain the relative image position while resizing in Webflow.