Strange image shrink when add 1px border to images

Hi Guys,

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. :smiley:

John

Read Only Share Link

Chrome Screencapture Video

Hi @webleeds

Can you provide the published link too?

Also just checking if you are using any custom code on the site - sometimes the explanation for a big difference in preview/published view…

Hi @StuM

Published link is ElationDJs

John

Hi @webleeds

It’s rendering fine for me - can’t spot any that aren’t from a random click into other pages either?

Have you managed to fix it?

If it’s still happening, does it also happen in Chrome Incognito ?

Hi @StuM

Sorry for the delay been away on work. So… I thought I had cured it but now its back, its the same page Sound Engineer Page (my Server) or the webflow hosted site is Webflow hosted sound engineer page

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…

Regards John

Project Read Only Link

Hi @webleeds

Looking at Chrome inspector, I think i’ve found where the dimensions are stated, but not why they are being set so low.

I’ll move this over to Bugs for the team to take a look…

Thanks @StuM - I thought I was losing the plot… :slight_smile:

Will you let me know the outcome please?

John

Update @StuM

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.

Hi @webleeds

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.

Hi @Brando

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…

John

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

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.