如果浏览器缩小了大图像，它会在不同的屏幕分辨率上显示相同数量的细节吗？

如何解决如果浏览器缩小了大图像，它会在不同的屏幕分辨率上显示相同数量的细节吗？

这个问题与网络开发有关。

我首先要为这个可怕的标题道歉，但我不知道如何命名。 CSS 像素以及它们与屏幕分辨率的交互方式已经让我有点困惑，当您添加“中间像素层”和图像绘制时，它就更加模糊了。所以这是我的实际问题：

假设我们有一个图像设置为在网页上显示为 2x1（css 像素）。我们改为为它提供 4x1 图像（光栅化）。浏览器会将此图像适合我们之前指定的 2x1 css 像素。但是，从技术上讲，我们能否在 1 CSS 像素 = 2 设备像素的设置中看到所有 4x1 像素？还是将 4x1 图像调整为 2x1 然后将每个像素显示两次？这是否会因浏览器/设备而异？

加分项：这对为视障人士放大网页内容的辅助功能工具有何影响？ （如果有的话）。

解决方法

回答我自己的问题。简短的回答是是浏览器会根据屏幕分辨率显示不同数量的细节。

CSS 像素不是屏幕像素。如果图像是 600x600 像素，而您决定在 300x300 (img:{width:300px;height:300px}) 的 CSS 定义区域中显示它，它可以显示为 300x300 屏幕像素，也可以显示为 600x600 屏幕像素。两者中的哪一个取决于最终用户的操作系统屏幕分辨率。

示例：

我创建了一个 4x1 像素的 png 图像：

我将此图像添加到 html 页面并使用 img:{width:2px; height:1px;} 调整其大小。为了更好地衡量，我还添加了一个带有 div:{width:2px; height:1px;} 的蓝色 div。

然后我将页面的“css 分辨率”设置为我的操作系统屏幕分辨率的一半（如果操作系统设置为 2000x2000，我确保完整的 html 页面的 css 宽度x高度为 1000x1000px）。所以每个 css 像素将包含 4 个屏幕像素。

显示方式如下：

图像和蓝色 div 的宽度均为 2px（即 css 像素），但它们显示为 4 个屏幕像素。在蓝色 div 的情况下，它复制像素以适应屏幕分辨率。但在图像的情况下，它显示所有 4 个单独的像素。在这两种情况下，它都会垂直复制像素以适应屏幕分辨率（从技术上讲，它可能比复制更复杂，但您明白了）。

我对此并不完全确定，但我假设在此阶段所有浏览器都以类似的方式运行。