相当于CSS Zoom？

Question

我有一个针对retina的img类（2x DPI），并且使用zoom:50%可以完美地工作。 但是，浏览器支持有限。

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

Answer 1

zoom: 50%应用到图片的zoom: 50%似乎使其尺寸正确，但是由于某种原因也会影响父div（至少在Chrome中）。 transform: scale(0.5)如果应用到图像本身， 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）;
转换：scale（0.5）;

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