仅使用 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.