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

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);

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

Answer 1

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

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

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