1:1 aspect ratio images

Design help General
1

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: https://preview.webflow.com/preview/vets-who-design?utm_medium=preview_link&utm_source=dashboard&utm_content=vets-who-design&preview=312e0dd52ab7a625c26b10454cf986c7&mode=preview

2

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:

image
image263×592 17.4 KB

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

image
image277×547 18.3 KB

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

image
image965×546 106 KB

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:

3 Likes
3

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

1 Like
4

Thanks @mikeyevin! really good answer.

1 Like