How to make images in certain size ratio

Hey Webflow Community!

I’m working on rebuilding an existing site within Webflow, and am pretty close to the finish line, but I’ve hit a wall on something that I think would probably be pretty simple for anyone who knows how to code.

Essentially, I’m trying to recreate the grid on this page- Guerilla Suit | A Creative Agency & Design Studio

I’m pretty close - I have the grid set up in there and tied to the CMS in a way that allows us make certain projects double size, double width, etc.

I just can’t seem to figure out how to adjust the custom code to change the project thumbnail size to be more of the 5:4 ratio like the original site.

Any help is appreciated :slight_smile:

Here is my site Read-Only: Webflow - Guerilla Suit

1 Like

Hey @Stephanie_White1, the thumbnail images on the site you’re trying to recreate are pretty much a 2:3 ratio. For example, the green image Zanzibar Austin on Desktop is 339px x 222px, which is ≈ 0,66 % ≈ a 2:3 ratio.

If you would like to change the thumbnail size to be a 5:4 ratio, add padding-top: 80%; to your class .Home-Grid-Container. If you’re interested, you can do some further reading on aspect ratios using CSS here.

Let me know, if this works for you.

1 Like

Hi @Stephanie_White1 while @choreus recommend padding trick that is totally valid and it was the only way to do that while ago now we have aspect-ratio Here is short video how to with both approaches.

Have a great one :wink:

1 Like

Great contribution @Stan! I didn’t know about aspect-ratio before, so it’s good to have learnt something new. I appreciate it.

1 Like

@Stan @choreus thanks so much for taking the time to get in there - I can always count on the community to help out :slight_smile: greatly appreciated!

1 Like