Streaming live at 10am (PST)

1:1 aspect ratio images

I’m trying to create a grid of profiles and I want the image to be a square no matter what size of image is uploaded. How do I create square image containers and have the image fill the container without changing the aspect ratio? I’ve tried to follow instructions on multiple forum posts about this but nothing seems to work for me.

Here is my site Read-Only: Webflow - Vets Who Design

Welcome to the community @fomosapien!

You can use the padding-top “hack” to get this working—just give your image wrapper a height of 0, 100% top padding, and relative position:

Now change your image to a height and width of 100% and position absolute with the “full” option:

Now, because you’re using the “cover” object-fit option, the image will cover the entire 1:1 square:

I’m sure there are other methods, but I’ve always used this and I haven’t had too much of an issue. Pretty soon we’ll be able to use the aspect-ratio CSS property, but for now it’s not very highly supported:

1 Like

Thanks so much @mikeyevin! That worked like a charm.