仅使用 CSS 以 50% 缩放显示高 DPI 图像

Question

我们的应用程序正在从第三方获取并显示图像。我们不知道图像大小是多少，但我们可以控制 DPI，因此我们可以为高分辨率屏幕请求双 DPI 图像。

我的问题是：是否有 HTML+CSS 解决方案可以以双分辨率渲染给定图像？做类似的事情：

img.hidpi {
    width: 50%;
}

不起作用，因为50%不是根据图像的内容计算的。

某些类型的 JS 是可以的，但我不想使用 JavaScript 来检查图像的内容 - 我们的代码库使这变得非常棘手。

Answer 1

设置width和height

据我所知，没有办法用 CSS 获取图像的尺寸。使用 JavaScript，您可以执行以下操作：

var myImgs = document.getElementsByClassName('hidpi');
for (var i = 0; i < myImgs.length; i++) {
  var width = myImgs[i].naturalWidth,
      height = myImgs[i].naturalHeight;

  myImgs[i].width = width / 2;
  myImgs[i].height = height / 2;
}

小提琴这个版本。

CSS3scale()

您可以使用 css3 transform，但这有一个缺点，即它会不断消耗整个（未转换的）空间：

var myImgs = document.getElementsByClassName('hidpi');
for (var i = 0; i < myImgs.length; i++) {
  var width = myImgs[i].naturalWidth,
      height = myImgs[i].naturalHeight;

  myImgs[i].width = width / 2;
  myImgs[i].height = height / 2;
}

小提琴。