Html 仅使用CSS以50%的比例显示高DPI图像

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

我的问题是：是否有一个HTML+CSS解决方案可以以双分辨率呈现给定的图像？做一些类似于：

img.hidpi {
    width: 50%;
}

不起作用，因为未对图像内容计算

50%

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

设置

宽度
和
高度

据我所知，没有办法用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;
}

.
如果您需要图像在容器中进行适配和缩放，则
对象适配
属性可能会有所帮助。尝试设置
对象匹配：覆盖在img上。@Danield不，他只是想将一个
缩放到其自然高度和宽度的50%，与集装箱无关后者的答案看起来很好-但是，消耗整个空间意味着什么？你的意思是，它右边或下面的其他物体会表现得好像它仍然是它的全尺寸？没错<代码>变换
不会更改元素的布局，但仅控制渲染。