在查看光栅图像时,或多或少的所有最新 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 × 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样式的内容可以在此处查看:
resource://gre/res/ImageDocument.css
resource://gre/res/TopLevelImageDocument.css
chrome://global/skin/media/TopLevelImageDocument.css
问题是,在HiDPI显示器上,低分辨率图像经常会放大(例如,在4k显示器上,它们会被放大 x1.5 )。
>我需要将哪些其他样式应用于生成的HTML,以便始终以原始大小(即 1:1 )显示图片?
我正在寻找自定义userContent.css
或userChrome.css
的正确方法。
有关userChrome.css
的更多信息:
答案 0 :(得分:1)
CSS无法使用物理像素代替对应于像素密度(devicePixelRatio
)的CSS像素。防止缩放在Firefox中的单独选项卡中打开的图像的唯一方法是根据devicePixelRatio
通过JS动态设置图像大小,并在每个resize
事件中执行此操作。
此外,还有一些隐式怪异的程序逻辑会强制执行某些操作,例如更改光标(类似-显然是硬编码的-逻辑设置图像视图页面的标题)。因此,摆脱这种怪异现象的唯一方法是克隆图像,隐藏原始图像,然后处理克隆的副本。但是,这种克隆的副本会受到所谓的“内容安全策略”的影响,因此可能根本不会显示-例如GitHub上的用户头像。
答案 1 :(得分:1)
正如您所指出的,您仅对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">