仅使用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;
}

Fiddle此版本。

CSS3 scale()

您可以使用css3 transform，但这样做的缺点是它会占用整个（未转换的）空间：

.hidpi {
  transform: scale(.5);
  transform-origin: 0 0;
}

Fiddle