Webflow: How to make an image square

1. Result vs original

This is what you can expect:

2. Adding the image

First, add your image to the canvas. You don't need to place it inside a div as this method works directly on the image itself.

3. Applying CSS to the image

Now, apply the CSS setting directly on the image: set both the width and the height to the same value (eg. 500 px) and set the 'object fit' to 'cover'. ALL DONE! Just to reiterate, make sure you selected the image itself in the 'Navigator' and that you're applying the CSS directly to it, not to the parent element.

4. Extra: Alternative approach

You can also make the image a square directly in a design tool such as Figma by setting its frame size to equal width and height before uploading it to Webflow. This step isn't necessary, but can help if you want more control over your images.