CSS缩放等效？答案

【问题标题】：CSS Zoom equivalent?CSS缩放等效？
【发布时间】：2015-06-07 08:27:54
【问题描述】：

我有一个 retina (2x DPI) 的 img 类，使用 zoom:50% 效果很好。但是浏览器支持是有限的。

我尝试了transform: scale(0.5)，但它没有做同样的事情 - 它根据它所在的包装 div（div 宽度的 50%）而不是图像宽度本身来缩放图像。

【问题讨论】：

【解决方案1】：

尝试使用以下元素。

-moz-变换：比例（0.5）；
-webkit-transform: scale(0.5);
-o-变换：比例（0.5）；
-ms-transform: 比例(0.5);
变换：比例（0.5）；

注意：但是如果浏览器版本应该更高，这将起作用。

【讨论】：

【解决方案2】：

zoom: 50% 应用于图像似乎使其大小正确，但由于某种原因也会影响父 div（至少在 Chrome 中）。如果应用于图像本身，transform: scale(0.5) 似乎也将图像大小调整为正确的大小。

div {
  width: 400px;
  border: 1px solid red;
}

img {
  border: 1px solid blue;
  /*zoom: 50%;*/
  transform: scale(0.5);
}

<div>
  <img src="" width="300" height="200">
</div>

【讨论】：