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

这个问题与web开发有关

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

假设我们有一个图像集在网页上显示为

2x1

（css像素）。我们给它一个

4x1

图像（光栅化）。浏览器将使此图像适合我们前面指定的

2x1

css像素。但是，在1css像素=2个设备像素的设置中，我们在技术上是否能够看到所有

4x1

像素？或者它会将

4x1

图像调整为

2x1

，然后每个像素显示两次？这种情况是否会因浏览器/设备而异

加分：这是如何应用到为视障人士放大web内容的辅助工具中的？（如果有的话）

编辑：我设法在Chrome上测试了这一点，它看起来将以屏幕分辨率（而不是css）显示图像

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

我将这个图像添加到一个html页面，并用

width:2px调整它的大小；高度：1px。为了更好地测量，我还添加了一个蓝色div，宽度为2px；高度：1px吼叫它

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

它是这样显示的：


图像和蓝色div都是2px宽（即css像素），但它们显示为4个屏幕像素。在蓝色div的情况下，它复制像素以适应屏幕分辨率。但在图像的情况下，它显示所有4个单独的像素。在这两种情况下，它都会垂直复制像素以适应屏幕分辨率（从技术上讲，这可能比复制更像是一种拉伸，但你明白了）。所以，为了部分回答我的问题，一个2px图像标签可以显示4px的数据

剩下的问题是：此浏览器依赖于浏览器还是所有浏览器都是这样工作的？
会进行一些插值来决定像素采用哪种颜色。@WaisKamal感谢您的及时回复！我得到一些插值将发生在调整图像大小时。我想知道图像是以“css分辨率”还是设备分辨率（在操作系统中设置）显示的。您在问题中回答：“浏览器将调整此图像的大小以适应2x1 css像素”。@WaisKamal对其进行了编辑以使其更清晰。我的意思是，它将适合图像的2x1 css像素。我不知道它是否会调整大小，这部分是我的问题。当然，它会调整图像的大小。这张照片看起来很拥挤。