浏览器显示的图像比原始尺寸大。

Question

我的网站显示的图片比它们的原始尺寸要大。这些图片比如在Photoshop中创建时，它们的尺寸会增加20%，如果一个图片的宽度是200像素，那么在浏览器中显示的宽度就是240像素。

所以，我的所有图片都模糊不清。

你知道为什么吗？

- Daniele

---

是的，这是100%的，如果我将大小调整为80%，一切都有正确的大小... - Daniele

你的 CSS 文件中在 HTML 或 Body 标签上是否定义了缩放属性？ - Mohd Asim Suhail

你能否更新你的问题并提供一些示例代码，这样我就可以分析它，因为图像出现20%更大的可能性非常小。你是否检查了所有的CSS代码中是否有缩放属性？ - Mohd Asim Suhail

你解决了这个问题吗？如果没有，能否请在 Github 或 JSFiddle 上分享你的代码？ - Mohd Asim Suhail

好的，我已经完成了。 - Daniele

Answer 1

我已经找到解决方案了！

Windows 10的默认dpi设置为125％（在搜索框中搜索dpi，然后查看“更新文本应用程序和其他元素”），这会增加我的监视器上所有内容的尺寸，因此我网站上的图像比原来大25％。

我该怎么做才能防止这种行为发生在我的网站上，并继续使用默认的Windows dpi设置呢？

- Daniele

---

我不确定是否是这种情况。将DPI更改为100％会减小浏览器和资源管理器（或Photoshop）的大小，但仍然存在不同的大小。 - rlatief

我正在测试它，如果测试清楚后可能会发布新问题...在此期间，如果有人阅读并知道原因...我创建了一张640像素宽的图片。我上传了这张图片，但在浏览器上看起来更大了。如果我重新下载这张图片，它就恢复到了640像素宽度。如果我截屏，则仍然较大（约800+像素）...为什么？这是一个新的显示器，我也玩了DPI设置，但正如我所提到的，它会缩小/放大所有内容，而这里的问题只是图片在浏览器中更大（而不是在资源管理器/图片查看器或Photoshop中）。浏览器当然是100%。 - rlatief

这是一个老问题，但我现在仍然遇到了这个问题。当我上传高质量的图片到我的网站时，网站上的图片看起来要大得多，就像被放大了一样，并且变得模糊。当我下载同一张图片时，在电脑上又正常了。我尝试调整屏幕 DPI 并将其设置为 100%，这有所帮助，但并不理想，因为屏幕变得太小了，但是这确实使一切更加一致。这只是不理想的解决方案。理想情况下，Windows 11 图片应用程序会随着屏幕的其他部分进行缩放，这样一切都会保持一致。 - K.D

Answer 2

这是我的一部分代码：

首先在头标签中，我有以下meta标签：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=1, height = device-height" />

我的CSS没有缩放或类似的内容，而我的HTML代码如下：

<img src="/path-to-image-folder-ebook-cover.jpg">

这张图片的宽度是250像素，在Photoshop中看起来完美，但在浏览器中（Chrome或Firefox都一样）看起来更大且模糊。但是，如果我将浏览器缩小到80％，图像就会变得完美。

- Daniele

Answer 3

我也遇到过Chrome浏览器显示比我的图片查看器应用程序大的情况。正如Daniele所说，我的Windows显示设置被缩放到了125%。当我将显示比例更改为100%时，图片查看器应用程序仍然显示相同的图片大小，只是更改了按钮和其他显示元素的比例。因此，也许有用的信息是，我的显示比例不会改变图像显示大小，但会改变其他所有内容。另一方面，浏览器完全受系统显示比例的影响。我甚至发现http://whatismyscreenresolution.net/根据我的系统显示比例设置，读取到的屏幕尺寸太小了。

- Joe