转换：缩放与传统调整大小

Question

使用transform: scale(x.x) 而不是使用宽度和高度属性进行传统的调整大小有什么缺点吗？缩放会产生较低质量的图像吗？

Answer 1

Scale 生成质量更好的结果（从视觉的角度来看），因为许多浏览器使用高级重采样算法通过 GPU（换句话说，使用硬件加速）渲染它，但它有一个缺点：

缩放的对象不会在其周围创建空间，大于其原始大小。

实际上......浏览器的行为如下（大约）：

1. 以原始大小渲染对象“A”
2. 在其周围放置其他对象（在此之前浏览器完全忽略 scale 规则声明）
3. 最后，“A”的“视觉上”缩放，与其他图层重叠，就像在不同的图层中一样

Answer 2

transform:scale(); 不会扩大或缩小元素使用的初始空间。

一个 100px 的正方形可能看起来是 200px，但在屏幕上仍会使用 100px²。它会与周围的东西重叠。