问题
my web site displays images bigger than their original size. The images are 20% bigger than the original created with photoshop (for example), if an image's width is 200px, the browser display is 240px.
So all my images are blured.
Do you know why?
回答1:
I've found the solution!
Windows 10 has the default setting of dpi seted to 125% (search dpi into serach box and then look at "update text app and other elements"), this increase the dimension of everything in my monitor, so the images into my web site are bigger of 25%.
What I can do to prevent this behaviour on my web site and continue to use the default windows settings dpi?
回答2:
Here are a part of my code:
First of all in the head tag I have this meta tags:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=1, height = device-height" />
My css hasn't any zoom or similar, and my html is like this:
<img src="/path-to-image-folder-ebook-cover.jpg">
The width of this image is 250px and in photoshop it looks like perfect, but in browser (chrome or firefox is the same) it looks bigger and blured, but, if I zoom down the browser to 80%, the image is perfect
回答3:
I was having a similar problem but for other reasons. I was setting
width: 100%;
height: 100%;
And the image was getting bigger.
I removed the width:100% (only setting the height: 100%) and the image now has the original size.
Note that the image will not be responsive. You can limit the image size and continue to have a responsive image using this: https://stackoverflow.com/a/14390145/8477340
来源：https://stackoverflow.com/questions/48406305/browser-displays-images-bigger-than-original-size