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

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

Answer 2

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

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

在我的方法中，我选择在min-resolution上使用resolution，因为如果精确的DPI不匹配，这将至少选择 close 。为此，您不得在其他地方设置width的{{1}}属性。 img和默认行为一样会自动计算。

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));
  }
}

我在这里只包括了一些，但是总体思路很简单-按浏览器放大图像的相同数量缩小图像。

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

<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">

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

2 个答案: