CSS Zoom相当于？

Question

我有retina（2x DPI）的img类，使用zoom:50%完美无缺。但是浏览器支持有限。

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

Answer 1

应用于图片的

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>

Answer 2

尝试使用以下元素。

-moz-transform：scale（0.5）;
-webkit-transform：scale（0.5）;
-o-transform：scale（0.5）;
-ms-transform：scale（0.5）;
变换：规模（0.5）;

注意：但如果浏览器版本应该更高，这将有效。