image - 变换:缩放与传统调整大小

Question

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

Answer 1

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

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

实际上....浏览器的行为如下(大致):

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