如果浏览器缩小一个大的图像，它会在不同的屏幕分辨率上显示相同数量的细节吗？
这个问题与网络开发有关。
首先，我要为这个糟糕的头衔道歉，但我不知道该如何称呼这个头衔。CSS像素和它们与屏幕分辨率的交互方式已经让我有点困惑了，当您添加“中间像素层”和图像绘制时，就更加模糊了。我的问题是：
假设我们有一个图像设置为2x1 (css像素)显示在网页上。我们给它提供一个4x1图像(光栅化的)。浏览器将此图像与我们前面指定的2x1 css像素相匹配。但是，技术上我们是否能够在一个设置中看到所有4x1像素，其中1 CSS像素=2个设备像素？还是将4x1图像调整为2x1，然后显示每个像素两次？这种变化是基于每个浏览器/设备的吗？
加分:这如何发挥到可访问性工具，放大为视障者的网页内容？(如有的话)。
回答 1
Stack Overflow用户
发布于 2021-07-03 15:10:42
回答我自己的问题。简单地说，是浏览器将根据屏幕分辨率显示不同数量的细节。
CSS像素不是屏幕像素。如果图像为600x600像素，并且您决定将其显示在CSS定义的300x300 (img:{width:300px;height:300px})区域，则它可以显示为300x300屏幕像素，也可以显示为600x600屏幕像素。两者中的哪一个将取决于最终用户的操作系统屏幕分辨率。
示例
我创建了一个4x1像素的png图像：
我将此图像添加到html页面，并使用img:{width:2px; height:1px;}对其进行调整。为了更好地衡量，我还添加了一个蓝色div与div:{width:2px; height:1px;}波纹管它。
然后，我将页面的"css分辨率“设置为操作系统屏幕分辨率的一半(如果将OS设置为2000x2000，则确保整个html页面的css宽度为1000x1000px)。因此，每个css像素将包含4个屏幕像素。
它是这样显示的：
图像和蓝色div都是2px宽(即css像素)，但它们显示为4个屏幕像素。在蓝色div的情况下，它复制像素以适应屏幕分辨率。但在图像的情况下，它显示了所有4个单独的像素。在这两种情况下，它都会垂直复制像素以适应屏幕分辨率(从技术上讲，这可能是一种延伸，而不是复制，但您可以理解)。
我不完全确定这一点，但在这个阶段，我假设所有的浏览器都以类似的方式工作。
https://stackoverflow.com/questions/67341916
复制相似问题
腾讯云开发者
