文章目录
总结:
- zoom 不兼容火狐
- zoom 使等比例缩放,scale可以只缩放一个方向;属性值也不同
zoom缩放基点是左上角,scale 是中心位置
,用transform-orgin来改变- zoom缩放文字受12号字体限制,scale 可以缩小到12号字体一下
zoom 先缩放再渲染,scale先渲染在缩放
1. 兼容行区别
- zoom和scale这两个东西都是用于对元素的缩放,但
FireFox浏览器不支持zoom,且zoom并不是标准属性
- transform下的scale就不一样了,是明明确确写入规范的。从IE9+到其他现代浏览器都支持
2. 控制缩放的属性值不一样
- 控制缩放的值不一样。zoom更全面,但是不能是负数,只能等比例控制;
- 百分比值:zoom:50%,表示缩小到原来的一半。
- 数值:zoom:0.5,表示缩小到原来的一半。
- normal关键字:zoom:normal等同于zoom:1.
- scale虽然只能是数值,但是能负数,可以只控制1个维度。
transform: scale( []). 同时有scaleX, scaleY专门的x, y方向的控制
3. zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置
transform:scale(0.5)
– 以自己的中心为基点进行缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:268px;
height:188px;
background: red;
}
</style>
</head>
<body>
<p>原图片大小:</p>
<div class="box">
<img src="./img.png" alt="">
</div>
<p>zoom:0.5 - zoom缩放会将元素保持在左上角</p>
<div class="box">
<img style="zoom:0.5" src="./img.png" alt="">
</div>
<p>transform:scale(0.5) - scale默认是中间位置进行缩放,可以通过transform-origin来设置</p>
<div class="box">
<img style="transform:scale(0.5)" src="./img.png" alt="">
</div>
<p>transform:scale(0.5); transform-origin:top right; - scale默认是中间位置进行缩放,可以通过transform-origin来设置</p>
<div class="box">
<img style="transform:scale(0.5);transform-origin:top right;" src="./img.png" alt="">
</div>
</body>
</html>
4. 对文字的缩放规则不一致
- zoom缩放字体依然
受限于最小12像素中文大小
限制; - scale就是可以对图片 和 文字进行缩放,使文字大小小于12像素
5. 执行的渲染顺序不同
- 如下图2、3都是缩放0.5,给scale设置成左上角为中心点进行缩放;且在父容器里上下居中
- 但2图中,
scale是“先布局后变换的,变换不会对布局产生影响”
- 图3中,
zoom是先缩放,后计算布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width:268px;
height:188px;
background: red;
display: flex;
}
img {
align-self: center;
}
</style>
</head>
<body>
<div>
<img src="./img.png" alt="">
</div>
<br>
transform-origin:top left;transform:scale(0.5); -- 设置了scale,还有origin来将缩放的基点设置到左上角
<p>虽然设置了项目上下居中,当它并没有在容器里居中,因为scale是“先布局后变换的,变换不会对布局产生影响”,因此变化结束后元素呆在了左上角。</p>
<div>
<img style="transform-origin:top left;transform:scale(0.5);" src="./img.png" alt="">
</div>
<br>
zoom:0.5
<p>它先缩放,后计算布局。所以它得到了垂直居中效果</p>
<div>
<img style="zoom:0.5" src="./img.png" alt="">
</div>
</body>
</html>