使用纯CSS将高分辨率图像以50%缩放比例显示

Question

我们的应用程序正在从第三方获取和显示图像。我们不知道图像的尺寸，但我们可以控制DPI，因此我们可以请求高分辨率屏幕的双倍DPI图像。

我的问题是：是否有一种HTML+CSS解决方案可以以双倍分辨率呈现给定的图像？做类似于以下操作的事情：

img.hidpi {
    width: 50%;
}

不能正常工作，是因为50％没有根据图像内容进行计算。

某些JS是可以的，但我宁愿不使用JavaScript来检查图像内容 - 我们的代码库使这变得相当棘手。

- Steve Bennett

---

如果您需要图像适应并缩放到容器中，则object-fit属性可能会有所帮助。尝试在img上设置object-fit: cover;。 - Danield

@Danield 不，他只是想将 <img> 缩放到其自然高度和宽度的50％，与容器无关。 - CupawnTae

Answer 1

设置 宽度 和 高度

据我所知，使用 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;
}

CSS3 scale()

您可以使用 CSS3 的 transform，但它的缺点是它会一直占用整个（未变换的）空间:

这个版本的 Fiddle

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

Fiddle.

- Linus Caldwell

---

那个后面的答案看起来不错 - 但是你说的整个空间被占用是什么意思呢？你是指右边或下方的其他对象会像它仍然保持完整大小一样吗？ - Steve Bennett

没错。transform 不会改变元素的布局，只控制渲染。 - Linus Caldwell