☰

网络浏览器/图像编辑器显示不同分辨率的图像吗？

tag-icon • tag-icon windows-10 browser images resolution
网络浏览器/图像编辑器显示不同分辨率的图像吗？

下面是 imgur.com 上的一张 513x147 的图片。

在此处输入图片描述

如果我查看它（https://i.stack.imgur.com/HtVSr.png) 在网络浏览器（Chrome 或 Firefox）中，它显示为稍微调整大小的图像，在我的屏幕上显示为约 642x183 像素，即使我仔细检查以确保网络浏览器以 100% 缩放显示。

如果我将其下载到我的电脑并在 IrfanView 或 Windows Paint 等图像编辑器中打开它，它会以正确的大小显示并且看起来清晰美观。

如果我将 PC 插入外接显示器，则会出现相同的尺寸差异（图像编辑器小于浏览器），但现在图像编辑器显示的尺寸看起来比正常尺寸小，而浏览器窗口看起来不错。（这在图像编辑器中非常奇怪；如果我截取全屏窗口的屏幕截图，然后粘贴到图像编辑器中并以“100％”显示，则它不会填满整个屏幕。）

发生了什么事？我在联想 P51 上运行 Windows 10，显示屏分辨率为 1920x1080。我尝试过分辨率为 1920x1200 和 2560x1400 的外接显示器。

例如，这是在 1920x1200 显示器上运行 IrfanView 的屏幕截图，其中粘贴了全屏浏览器窗口的屏幕截图。请注意，IrfanView 声称它以 100% 显示图像，但图像并未填满整个屏幕。

在此处输入图片描述

答案1

我想我找到了：Windows 10 有一个针对每个显示器的缩放设置。我的笔记本电脑屏幕将其设置为 125%（大概是因为它在小显示器上分辨率很高），而我的显示器设置为 100%。

在此处输入图片描述

但是，这并没有解释为什么这两种类型的程序显示不同。（这似乎是程序和操作系统之间的交互。也许 IrfanView + Paint 查询操作系统以找到整个系统的“缩放比例”，并且没有被编程来处理具有不同缩放比例的多个显示器……不确定为什么浏览器会获得不同的缩放因子。）

答案2

Web浏览器主要强调的是网页所有元素的一致显示，因此会根据引擎和浏览器独有的参数来调整这些元素。

图像编辑器的主要重点是准确地以图像形式显示图形信息，以便可以对这些图像做出必要的修改。

不同的浏览器使用不同的渲染引擎和不同的参数来显示（渲染）网站上的图片。通常会或多或少地自动调整大小。

这是一种正常行为，许多网页设计都致力于使网站在常见浏览器上一致显示，并且通常必须对网站的样式表或设计框架进行重大修改以允许在各种浏览器上保持一致的 UI。

当您考虑不同的屏幕时，您还需要处理缩放问题，其中 Windows 中的视觉元素会根据屏幕的物理尺寸相对于组成屏幕的像素数进行调整以填充不同数量的像素。

答案3

如果你查看问题的来源，你会发现有一个style=带有宽度和高度参数的子句，它会覆盖图像的尺寸：-

<a href="https://i.stack.imgur.com/HtVSr.png" rel="nofollow noreferrer">
<img src="https://i.stack.imgur.com/HtVSr.png" alt="enter image description here"
    style="width: 513px; height: 147px;">
</a>

SU 提交过程已重现条款中的图像尺寸style=，但其他网站可能不会这样做。不同浏览器显示相同的缩放比例这一事实表明这就是您观察到的原因。

请注意，SU 将缩放大型内嵌图像并减小style=其尺寸，以防止平移或裁剪。

相关内容