Html 如何防止Mozilla在HiDPI显示器上放大图像？

查看光栅图像时，几乎所有最新的Mozilla产品（例如Firefox和SeaMonkey）都会将其转换为完整的HTML文档，例如。g、 :

谷歌logo_color_272x92dp.png（png图像，544×184像素）

CSS无法使用物理像素代替对应于像素密度的CSS像素（

devicePixelRatio

）。防止缩放Firefox中单独选项卡中打开的图像的唯一方法是根据

devicePixelRatio

通过JS动态设置图像大小，并在每个

调整大小

事件中执行此操作

---

此外，还有一些隐含的奇怪的程序逻辑，强制执行一些事情，如光标更改（类似的-显然是硬编码的-逻辑设置图像视图页面的标题）。因此，摆脱这种怪癖的唯一方法是克隆图像，隐藏原始图像，然后处理克隆的副本。但是这样的克隆拷贝会受到所谓的内容安全策略的影响，并且可能根本不会显示—例如GitHub上的用户头像就是这种情况。

正如您所表示的您只对CSS解决方案感兴趣，我将不包括JavaScript替代方案

仅使用CSS将本质上限制您枚举DPI，因为CSS不支持任何获取设备像素比率的方法。将来可能会有一个环境变量集，尽管我不知道有这样的建议

在我的方法中，我选择使用

min resolution

而不是

resolution

，因为如果确切的DPI不匹配，这至少会选择接近的值。要使其工作，您不能在其他地方设置

img

的

width

属性<代码>高度将自动计算，这是默认行为

@介质（最小分辨率：1.5dppx）{
img{
变换：比例（计算（1/1.5），计算（1/1.5））；
}
}
@介质（最小分辨率：2dppx）{
img{
变换：比例（计算（1/2），计算（1/2））；
}
}
@介质（最小分辨率：2.5dppx）{
img{
变换：比例（计算（1/2.5），计算（1/2.5））；
}
}
@介质（最小分辨率：3dppx）{
img{
变换：比例（计算（1/3），计算（1/3））；
}
}

为什么不使用内联样式

样式=“宽度：200px；高度：50px@ashwingeted'Sa，因为我希望CSS是通用的，适合查看任何图像。这只是Firefox中的问题吗？如果不是，用CSS修复应该相对容易。@jhpratt我的问题是，如何用纯CSS修复，但要以大小独立的方式（即允许一次性修复的方式）。再进一步研究一下，在一定程度上用CSS修复是完全可能的，但它需要一份详尽的DPI/像素比列表。如果你愿意接受这样的解决方案，一点JS就可以解决这个问题。谢谢，这种方法很有效，唯一的缺点是图像会被放大，占据直接父元素的整个矩形（
）。换句话说，我需要100%的图像宽度，而不是100%的
body
元素（它往往是浏览器窗口的宽度）。我该如何解决这个问题？更新：我已经尝试过
对象匹配：无
，但我还不能确认后者不会影响缩放。通过使用
变换：缩放（0.5,0.5）成功地实现了部分成功而不是
宽度：计算（100%/2）
对于
2dppx
，必须进一步测试它。@Bass使用
scale
应该可以正常工作，至少在我的头顶上。