如何防止 Mozilla 放大 HiDPI 显示器上的图像？答案

【问题标题】：How do I prevent Mozilla from up-scaling images on HiDPI displays?如何防止 Mozilla 放大 HiDPI 显示器上的图像？
【发布时间】：2019-11-24 00:36:46
【问题描述】：

查看光栅图像时，所有或多或少最近的 Mozilla 产品（例如：Firefox 和 SeaMonkey）将其转换为完整的 HTML文件，例如g.：

<html>
  <head>
    <meta name="viewport" content="width=device-width; height=device-height;">
    <link rel="stylesheet" href="resource://gre/res/ImageDocument.css">
    <link rel="stylesheet" href="resource://gre/res/TopLevelImageDocument.css">
    <link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css">
    <title>googlelogo_color_272x92dp.png (PNG Image, 544&nbsp;×&nbsp;184 pixels)</title>
  </head>
  <body>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </body>
</html>

默认CSS样式的内容可以在这里查看：

问题在于，在 HiDPI 显示器上，低分辨率图像通常会被放大（例如，在 4k 显示器上，它们会放大 x1.5 倍）。 p>

我需要对生成的 HTML 应用哪些额外样式才能始终以原始大小显示图像（即 1:1）？

我正在寻找自定义userContent.css 或userChrome.css 的正确方法。

更多关于userChrome.css:

【问题讨论】：

你为什么不使用内联样式style="width: 200px;height: 50px;
@AshwinGeetD'Sa 因为我希望 CSS 是通用的，适合查看 any 图像。
这是仅在 Firefox 中的问题吗？如果没有，用 CSS 修复应该相对容易。
@jhpratt 我的问题完全是关于如何用纯 CSS 解决这个问题，但是以一种与大小无关的方式（即允许一劳永逸地修复它的方式）。
再深入研究一下，一定程度上绝对可以在 CSS 中实现，但需要详尽的 DPI / 像素比率列表。如果你愿意接受这样的解决方案，一点点 JS 就可以解决这个问题。

标签： html css firefox seamonkey

【解决方案1】：

CSS 无法使用物理像素来代替像素密度对应的 CSS 像素 (devicePixelRatio)。防止在 Firefox 的单独选项卡中打开的图像缩放的唯一方法是通过 JS 根据 devicePixelRatio 动态设置图像大小，并在每个 resize 事件上执行此操作。

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

【讨论】：

【解决方案2】：

正如您所表明的，您只对 CSS 解决方案感兴趣，因此我不会包含 JavaScript 替代方案。

仅使用 CSS 会固有地将您限制在 DPI 的枚举范围内，因为 CSS 不支持任何方式来获取 设备像素比。将来可能会有一个环境变量集，虽然我不知道有任何这样的提议。

在我的方法中，我选择使用min-resolution 而不是resolution，因为如果确切的 DPI 不匹配，这至少会选择一些东西close。为此，您不得在别处设置img 的width 属性。 height 将被自动计算，这是默认行为。

@media (min-resolution: 1.5dppx) {
  img {
    transform: scale(calc(1 / 1.5), calc(1 / 1.5));
  }
}

@media (min-resolution: 2dppx) {
  img {
    transform: scale(calc(1 / 2), calc(1 / 2));
  }
}

@media (min-resolution: 2.5dppx) {
  img {
    transform: scale(calc(1 / 2.5), calc(1 / 2.5));
  }
}

@media (min-resolution: 3dppx) {
  img {
    transform: scale(calc(1 / 3), calc(1 / 3));
  }
}

<meta name="viewport" content="width=device-width; height=device-height;">
<link rel="stylesheet" href="resource://gre/res/ImageDocument.css">
<link rel="stylesheet" href="resource://gre/res/TopLevelImageDocument.css">
<link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css">

<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

我在这里只包括了一些，但总体思路非常简单——将图像缩小与浏览器放大的数量相同。

如果您喜欢 Sass，那么有一种简单的方法可以遍历您支持的 DPI 并生成结果代码。在 PostCSS 中使用几个插件可以获得类似的结果。

$resolutions: 1.5 2 2.5 3

img
  @each $res in $resolutions
    @if $res != 1
      @media (min-resolution: #{$res}dppx)
        transform: scale(1 / $res, 1 / $res)

【讨论】：

谢谢，这种方法有效，唯一的缺点是图像被放大以占据直接父元素的整个矩形 (<body/>)。换句话说，我需要 100% 的图像宽度，not 100% 的 body 元素（这往往是浏览器窗口的宽度）。我该如何解决？ 更新：我已经对object-fit: none 进行了试验，但我还不能确认后者不会破坏缩放。
通过使用transform: scale(0.5, 0.5); 而不是width: calc(100% / 2); 来实现2dppx 的部分成功，必须进一步测试。
@Bass 使用 scale 应该可以按预期工作，至少在我的脑海中。