Image resizing is making me crazy

victorbrb · March 21, 2022, 3:15pm

Hey everybody, this is my first post and I’m posting here in a last resort way.
I looked around but haven’t found a solution to this bug/glitch that Webflow has.

As you can see on those 2 videos:

I created my portfolio and all the images have the proper sizes with a 100% width max, but when I export the image will be 100% of the full width of the browser. Sometimes when I go back to my webflow project and click on them and publish again this glitch is fixed but it’s driving me crazy because most of the times it doesn’t work!

The images from my case studies are all broken and giant because of this stupid glitch.

Can someone help me?

I tried:

– Set fixed size for an image (did not worked because otherwise won’t resize)
– Have a global max-width: 1920 (the images that are broken with the glitch will look giant on the page even tho they are much smaller)

Here is my site Read-Only: Webflow - Victor Berbel – Portfolio (2022)

Stan · March 22, 2022, 10:41pm

hi @victorbrb your issue is related to misunderstanding of image sizing in relation to its container.
you need to set your image to take 100% of container width, you have set this with to auto and with this setting you have said to browser that your image should take any with up to 100% of its original size.

Instead you should tell browser that your image should take 100% of its container and no more. Here is simple visual description for better understanding. I presume you are familiar with differences between fill, cover, contain.