css - 以其 "native"大小的 50% 显示图像

Question

我在不知道相应图像的宽度/高度的情况下将 img 标记放入文档中:

<img src="/myimage.png" />

我想使用 CSS 将图像精确缩放到其“原始”大小(底层图像的大小)的一半。我不知道该怎么做。

• 使用 width: 50% 将根据包含 block 而不是图像调整大小。
• 我无法调整到特定的像素宽度，因为我不知道图片的大小。

• 因为我只需要支持 WebKit，所以我尝试使用转换:

  -webkit-transform: scale(0.5);
  

  这可以很好地调整图像，但不会调整图像元素本身的大小。

• @Radagaisus 建议使用 Javascript，这是一个很好的后备方案。然而，这是在一个超轻量级移动页面上，所以我不能使用 jQuery，并且手动处理所有 onload() 处理程序会很痛苦。

作为后记:我为什么要这样做？因为我需要处理 Retina 显示屏。我可以使用 devicePixelRatio 检测它并填充更大 (2x) 的图像，但我需要将它们缩小到 50% 以在显示器上看起来正确。

Answer 1

缩放属性听起来对 Adam Ernst 来说是完美的，因为它适合他的目标设备。但是，对于那些需要解决方案并且必须支持尽可能多的设备的人，您可以执行以下操作:

<img src="..." onload="this.width/=2;this.onload=null;" />

添加 this.onload=null 的原因是为了避免旧浏览器有时会触发两次加载事件(这意味着您最终可能会得到四分之一大小的图像)。如果你不担心，你可以写:

<img src="..." onload="this.width/=2;" />

非常简洁。