I’ve never ran into this before, but I have a div with 3 png images that I have set to be centered within a horizontal flex. The orientation of the outer 2 images are more vertical and the middle one is horizontal. I have div wrapper and all 3 images inside of it set to contain, and all 3 images with their overflow set to auto. I had it all set how it should be but as I edit other parts of the website, randomly the 2 outer images will just drastically change in size and become large then the center one throwing everything off, then randomly it will go back to the way it should be. It looks correct when I preview it, but how can I get the designer to stop doing this? It seems to do it mostly when I click into the setting panel away from the canvas, then revert to normal when I click into the canvas again. Any ideas?
I just added the links to the post, it was able to minimize it somewhat but it’s still wrong on the live version which I also posted. It always changes the images sizes 100% of the time when I go to publish. Not sure how to fix.
When using percentage sizing, it’s good to use non-relative sizing like pixels in addition because it’s easier to control. I would add a max height in pixels to the beer bottles.
It could also be your overflow settings on the beer bottles. Reset your overflow so it’s not on auto. All Auto does is tell the browser to make the images scrollable if they get too big. You don’t want that.
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 give 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
