How can I make all the images in the grids beneath the 'Accommodation' Hero Image in Webflow the same size?

You want all the images in the grids under the 'Accommodation' Hero Image to appear the same size in Webflow. This is typically done by adjusting the images’ settings and styling for consistency.

1. Use Consistent Image Dimensions

• Ensure all images are uploaded at the same aspect ratio (e.g., 4:3 or 1:1).
• If you can’t crop them before upload, you can use CSS to force uniform sizing.

2. Apply Uniform Width and Height in the Grid

• Select one of the images in the grid, go to the Style panel, and apply the same width and height you want.
• Example: Set Width: 100% and Height: 250px to fill the grid cell while keeping height consistent.

3. Set Object-Fit to Cover

• With the image still selected, scroll to Object Fit in the Style panel.
• Choose Cover so the image fills the space while maintaining aspect ratio and cropping overflow areas.
• This ensures the image doesn’t stretch or squash.

4. Use Div Blocks Instead of Images Directly (Optional)

• For more control, wrap each image in a Div Block:
• Set the Div Block to a fixed height (e.g., 250px) and width 100%.
• Apply Overflow: Hidden to the div.
• Set the image inside to Width: 100%, Height: 100%, and Object Fit: Cover.

5. Check Layout on Different Breakpoints

• Switch to Tablet and Mobile Views in Webflow's Designer and ensure the styles remain consistent.
• Adjust the fixed height or aspect ratio on smaller devices if needed.

Summary

To make all grid images under your 'Accommodation' hero section uniform, either upload images with consistent dimensions or apply a fixed height + object-fit: cover styling in Webflow. Using div wrappers for each image offers even more consistent control.