Browser default image scaling

#1

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?

#2

i’ve spent some time messing with css to see what i can do about this. I think that the browsers are scaling 20% because the following code makes all of my content look perfect according to actual size: html { zoom: 0.8; } However, Firefox refuses to obey this command. Thus, i suppose that my site requirements will have to specify optimized for Edge or Chrome.

I decided to check this 20% scale by using the following css code on one of my images:

img.testScale { transform: scale(0.8); }

this works! my image is actual size in Firefox and it seems to maintain this aspect ratio.

is there a way to control scaling on elements using JavaScript (not JQuery)?