When I’m working in Webflow Designer, an image keeps resizing on its own like jumping up and down
I read posts by other people who had this same problem but found no solution, or tried possible ways to fix it
What didn’t work -
Remove max-width: 100%; from images
Set image to pixel size values in height and width - this is a nightmare for responsivness and it shouldn’t be like that
Remove any fixed height from parent element - although this shouldn’t matter too much, let’s say a section has min-height: 100vh; - that doesn’t affect it
Set image to display: block;
Set image inside div so that it’s easier to work with
After all of this I am still having the same problem, the image just keeps jumping up and down and resizing, so I don’t even know how to position the damn thing and adjust it
Ps. I can’t include a read-only link because I’m working on a client project
However, please share with me what your opinions are and how CSS/Designer might fix this issue
I see that you’ve encountered an issue but it would not be really possible to know what actually is the issue with your particular implementation.
If you cannot share the client’s project then why don’t you create another project in your account and only copy that part. This will also help you to test to try and come with that issue.
Also Webflow does have many limitations but all most all the time elements won’t have an issue just because it is in Webflow. There must be some CSS or JS causing the issue.
I had a similar problem to the one you are describing on 2 of my recent projects.
I managed to fix this by putting Min W 100%, Min H 100% Max W 100% and Max H 100%.
It might sound silly, but this worked for me. It is hard to tell if you have the same issue without seeing the project. I do believe this is bug since the images were resizing without me even touching the controls, or even scrolling the page.
Anyhoo, give it a try and let me know!
Regards,
Alex
EDIT: I forgot to add, my images were in a grid inside divs. Divs had 100% all the way too.
I am having the same issue while following along the 21 day portfolio Webflow course. I am a new user and learning the software, but it seems this bug has been around for a while. What does that cause on the clients end?
It the designer in preview it looks fine, then when published it shrinks. Screenshots below, I also included share link.
Same problem here, and it’s the first time I encountered such behaviour. It’s really, really frustrating, as I’m currently working on an image-heavy website and this keeps happening, totally randomly. Whenever I’m able to fix it with some strange adjustments it affects another image after some time. I’m starting to believe it’s a bug on Webflow’s part.
Same problem here, images suddenly resize for no apparent reason in the Hero Heading Right and Hero Heading Left layouts. Any news on a resolution to this?
I ran into this issue and tested some ideas; so far, I think I found a few solutions:
If you are following the 21 day design portfolio course exactly, and you drag and drop your assets into your project, instead, try manually uploading the hero-background image.
In another thread, someone mentioned the idea that Webflow needs certain parameters defined to work correctly.
When I drag + drop the image, it comes through without pixel dimensions defined.
But when you upload using the upload button – and maybe uploading the file individually? – it comes through with pixel dimensions defined. This solved the issue for me.
If that doesn’t work, I also saw the issue fixed when I set min-width on the image to 100%.
I’m still having this issue. I compressed the images to the point where they no longer had the “image too large, replacing with smaller image” notice, but now they resize and are extremely fuzzy.
I upload them manually to the asset manager, I have them all set to min/max 100% height/width.
I’ve had this happen in the past, but not this badly.
I also encountered this bug while doing the 21 day course, I ended up noticing it only happens when the designer saves changes, but reverts back while it is still saving.
I went to the assets tab and clicked the image, and after the designer saved the image in it’s 100% view, the issue didn’t occur again.
I hope this helps someone also
Looks like this issue is still around/back again, as it’s happening to me, today.
Using the latest version of Chrome, and latest version Arc browsers.
Also, the set anchor position of the image seems to be very temperamental as well, or not work at all.
Webflow, you are amazing at what you do, yet this has been around for close to a year; please don’t go down the route many other hosts do and not fix things.
Okay so I was having the same issue where my image got re-sized automatically and I tried everything from setting the max-height and width to setting min-height and width but nothing really worked as expected. So I kept on trying until I landed at the solution for it. My Image was under a parent div and that div was under a parent div that has flexbox applied to it.
Now what I did was simply gave the Image max and min height and width according to my need and now the important part, as the image parent was under a flexbox div, the Image parent div was a child element of the flexbox which gave me certain powers such as Do not shrink and grow
And that’s my friend is the solution, you simply have to give the image a min and max height and width and then the parent of the image Do not shrink and grow and you are good to go
