I just thought I’d share a quick way to get perfectly square images everytime in the Webflow designer, regardless of the viewport size… I know some users struggle to do this without using explicit pixel sizing which isn’t ideal for responsiveness.
With this method, you can set it up once on the desktop viewport, and they will always stay square no matter what the size of the browser.
Add a Container, a Grid (make it 3 columns if you like) and add a single div into the grid
Next, give the div a height of
0px, and a top and bottom padding of
50%(make sure it’s percent, not pixels.
overflow: hiddenand give your div a
You can see the settings with the blue style label below
That’s your div wrapper done
Now to add images:
add an image inside the div
Give a min-height and min-width of 100%
Lastly, set the
coverso the image fits properly, and is not skewed.
Now you can copy and paste the div wrapper a few times and see how it looks across different breakpoints. Checkout this Grid tutorial if you need to as well.
Which is French for “this is how you make images square and responsive”… I think.
Let me know if you found this helpful, or if theres a different way that you do it as well.