Images resizing seemingly according to their own whims

Design help General
1

Hello all,

I’ve been having a persistent problem. I’ve got a certain effect achieved with custom code where the grid on my home page that contains all of the images for my portfolio work distorts (skew, stretch, and perspective rotation) after it reaches the top 20% or so of the page. I used two copies of the divs containing the grid and the custom code positions and distorts everything and handles page scrolling.

The issue is that, sometimes, some of the images in the distorted portion decide to resize themselves. Sometimes in both the editor and on the live page in my browser, sometimes on one or the other only. Sometimes it fixes itself out of the blue, and sometimes in breaks likewise. I’ve shown some people who didn’t seem to notice any particular issues, but I wasn’t able to verify by looking at their screen nor discussing it with them in detail, and it was a small sample size.

Here is how the effect should look:

how it's meant to go
how it's meant to go1920×1000 164 KB

And here’s how it actually looks (when it feels like it):

how it's going
how it's going1920×1000 134 KB

At the bottom of the page is my read-only, but because the scrolling is handled through custom code, you can only actually scroll in the editor by changing the vertical position of the “fold-content” div, so here’s a link to the live site as well to make it easier to analyze the scrolling behavior:

This has been a constant thorn in my side and I’ve tried everything short of an 8-ball and an exorcism. I hope you fine folks can help me here, you’re my only hope.

Here is my site Read-Only: LINK

2

Hi Jacob,

I only had the chance to have a quick look at your read-only. You seem to work with % values a lot. During my own build I figured that this often results in random resizing of images within a grid. Have you tried to set a specific width or height to your images?

Until now, I didn’t find a way to make a grid fully fluid…

It seems possible though, like in this example:

3

Hey Chris,

Thank you very much for your reply! I actually wound up reaching out to Webflow support, and so far their solution works just fine.

For posterity’s sake, the issue turned out to be that the “image” elements themselves (‘home-project-image’ on my site) had their widths set to “auto”, and setting them to “100%” appears to have done the trick. It’s always a little thing that gets overlooked, isn’t it?

1 Like