仅使用 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，但这有一个缺点，它会不断消耗整个（未转换）space:

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

Fiddle.