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

Question

查看光栅图像时，所有或多或少最近的 Mozilla 产品（例如：Firefox 和 SeaMonkey) 将其转换为完整的 HTML 文档，e. 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).

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

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

有关 userChrome.css 的更多信息：

Answer 1

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

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

上的用户头像

Answer 2

正如您所指出的，您只对 CSS 解决方案感兴趣，我不会包括 JavaScript 替代方案。

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

在我的方法中，我选择使用 min-resolution 而不是 resolution，因为这至少会 select 一些 close 如果确切的 DPI 不匹配。为此，您不得在其他地方设置 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)

Answer 3

有一个名为 Viewhance 的扩展实现了此功能。它隐藏在未记录的设置后面。

要切换开关，需要打开扩展的配置参数，切换到 Option/Info 选项卡并输入 {"scaling": "*"}，然后单击导入。 (source)

图像将以原始分辨率显示。

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

How do I prevent Mozilla from up-scaling images on HiDPI displays?

html

css

firefox

seamonkey