How can I make all the images in the grids beneath the 'Accommodation' Hero Image in Webflow the same size?
TL;DR
- Set fixed width and height on image containers and apply 100% width/height with object-fit: cover to images.
- Use consistent or reused image/container classes and adjust responsive settings for uniform sizing across devices.
To make all images in the grids beneath the 'Accommodation' Hero Image the same size in Webflow, you’ll need to apply consistent sizing and fitting styles to both the images and their containers.
1. Identify the Grid and Image Elements
- Go to your Webflow Designer.
- Locate the section under the 'Accommodation' Hero Image that contains the grid.
- Select one of the images inside the grid to confirm its class name.
2. Standardize Image Container Dimensions
- Select the image’s parent container (usually a
Div BlockorGrid Item). - Set a fixed width and height, for example: Width:
300px, Height:200px. - Use Flexbox (Vertical/Horizontal Centered) or Grid settings to align content if needed.
3. Control Image Sizing with CSS Properties
- Select the image inside the container.
- Under Style settings, set these:
- Width:
100% - Height:
100% - Object Fit:
Cover(ensures the image fills the container without distortion while cropping the overflow if dimensions don’t match)
4. Reuse Classes for Consistency
- Make sure all images share the same class or duplicate and reuse the styled container/image structure for uniformity.
- Alternatively, create a Combo Class if you need slight variations across certain images.
5. Check Responsive Settings
- Switch to tablet and mobile breakpoints, and:
- Ensure your containers resize proportionally or stack appropriately.
- Adjust height if needed to prevent stretching or disproportionate images.
Summary
Set a fixed size on the image containers and apply 100% width/height with object-fit: cover to all images in the grid. Use consistent classes to ensure all grid images stay the same size across devices.