browser displays images bigger than original size

随声附和 提交于 2021-01-03 06:50:31

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!