移动应用程序中的图像变换比例无法正常工作

Question

我有一个图像，例如：

100x100

和

<div>
    <img src="someimage.jpg" />
</div>

然后：

-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);

我正在iphone5、三星和其他手机上测试，图像本身是按比例缩放的，但在div中，它看起来是相同的大小，视觉上我看到的是20x20px，但实际上在块中是100x100，我的问题是如何避免这种情况？

Answer 1

缩放不会更改DOM元素的已用空间。这是因为在某些转换用例中无法确定元素的形状，例如translate3d。

但是您可以将图像设置为背景图像，将其缩放到x 100%，y 100%，并设置图像的宽度/高度。

你必须对背景图像使用这个技巧，因为只设置宽度/高度会使图像看起来非常像素化。