Come across a strange occurrence tonight. When I apply 1px borders to my images they show fine in webflow preview but when I upload the site to the webflow.io domain or even export to my own domain some of the images got to about -90% of their size.
I have screen captured the occurrence happening, the first part of the video shows webflow in preview mode and the sound engineer pic on the sound engineering page is there… 2nd part of video after upload to webflow.io domain the image has shrunk by about 90%. The only way I can correct this is to re-upload the site then image seems ok for a bit but does keep disappearing at random times.
It’s not just for this image either, it happens to totally random images throughout the site on different pages. All use the same classes though.
Sorry for no sound but I don’t have a mic so hope you can see whats going on…
@Waldo don’t suppose you have any thoughts on this do you…? sorry to keep bugging you it’s just a big project for me so it’s got to be right.
As you can see it’s happening on both host servers so there is something going on…
It seems to be this page mainly but is randomly happening on other pages too… The only way I can seem to cure it is if I re-upload the site
Does the code look right to you, one thing I was going to ask is, should the border be applied to the image itself OR the div block containing the image or doesn’t it matter. Also, I have the image set to relative for the caption text, is that correct or should it be the div that is relative (will that make a difference)?
In answer to your question it does happen in incognito mode yes…
Just been on with this again and if I set the image(s) to 100% width then it uploads correctly so I think there possibly is a bug if you don’t define the width but this is how I’m getting over it at the moment. I’ll let you know if this seems to have cured it over the next few days or not.
Thanks for posting about this and thanks @StuM for recategorizing.
I did some testing on this end by removing that 100% width set on the image, but wasn’t able to reproduce the issue. Definitely sounds like weird behavior though, so if you are able to reproduce it please let me know.
For now it sounds like the 100% width workaround works well to resolve this. Alternatively you can try removing the image from the parent element (image div 450 photo) and then set the image to 450px max width.
Thanks for your answer… Is there a right or wrong way for images then? Should an image always be placed inside a div or not or does it depend on where you want it positioning…
There’s definitely no right or wrong as I think this is mostly a subjective choice when it comes to inline image vs background image. Here is a resource that may help, though: HTML img vs CSS background-image | Build Awesome Websites
