Hello, i am hoping that someone knows of a solution to a scaling problem that i notice in modern systems/browsers. long story short: i started coding in 1997. a 300x300 pixel image was always 300x300 pixels unless one altered the image tag. Nowadays, my 300x300 pixel image is blurry in every browser, so my site looks cheap unless the zoom is adjusted. I’ve noticed this since i started coding again. I’ve tried to figure out what is happening and the only resolution that i could find is css zoom. Edge and Chrome obey my command to set the zoom at 0.8 (which is actual size no scaling.) Firefox continues scaling. This problem doesn’t make sense to me because a browser zoom level shows 100% but the images are still blurry. Yesterday, i revisited this problem. I noticed that my image was being scaled and being scaled down from 283px x 183px to 263px x 163px. So now i see that this is a scaling problem not a zoom problem.
my question is how can we stop browsers from scaling images? i tried setting max-width, max-height, min-width and min-height using css. The image is still scaled somewhow because unless i specify zoom: 0.8, then the image looks blurry. what is going on here and why? i am getting angry about it because my logo is huge at 96x96 pixels and my default font size is 16 pixels, so i see no need for a browser to add any scaling.
a bit more research and i notice that windows 10 sets a scaling to 125% recommended for text. Is this being used by browsers?
how can we fix this problem? any ideas?