zoom和transform:scale()的区别

文章目录

1. 兼容行区别
2. 控制缩放的属性值不一样
3. zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置
4. 对文字的缩放规则不一致
5. 执行的渲染顺序不同

总结：

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>

小tips: zoom和transform:scale的区别
CSS中两种放大zoom和scale的区别

zoom和transform:scale()的区别相关推荐

zoom和transform:scale的区别
zoom简介在旧的web时代.*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动,修复一些布局上的疑难杂症等. 其支持的值类型有: 百分比值:zoom:50%,表示缩小 ...
CSS中zoom和transform:scale的区别
原文地址:http://www.cnblogs.com/foodoir/p/5821018.html 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inli ...
html scale属性,CSS中的zoom属性和scale属性的用法及区别
CSS中的zoom属性和scale属性的用法及区别 CSS中的zoom属性和scale属性的用法及区别是什么呢?以下是小编整理的相关内容,欢迎阅读学习! zoom 属性语法: zoom:normal ...
zoom与scale的区别
最近做了两个项目,一个需要对字体缩小,小于默认的字体大小(12px),最后使用transform:scale(0.9),但整个元素宽高都被缩小了,感觉很不好~~~做另外一个项目要求将整体页面安一定比例 ...
vue 组件拖拽和缩放，支持在容器为transform:scale和zoom情况下的正常显示
自己造轮子好累, 起因是用别人的封装组件时发现在父容器缩放(transform:scale.zoom)情况下需要拖拽缩放的组件的鼠标位置有偏移,看文档看源码找不到自定义缩放比例的地方,痛苦. 实现效果 ...
transform: scale(x,y)
作用: 1)缩放 2)反转水平翻转:transform: scale(-1,1); 垂直翻转:transform: scale(1,-1); 水平垂直翻转: transform: scale(-1, ...
css3缩放 transform: scale() 使用缩放之后顶点对齐问题
css3缩放 transform: scale() 使用缩放之后顶点对齐问题注意点:想要将缩放之后的div对齐顶点,那么需要将css属性设置为:transform-origin: 0 0 <d ...
SWT里Slider和Scale的区别
以前以为Slider和Scale之间只是外观的区别,今天发现不是这样的,因为Slider有一个特点:getSelection()能得到的最大值并不是getMaximum()的值,要减去getThum ...
transform:scale实现大屏自适应
小结一波~ 前言大屏使用rem 耗时而且对浏览器最小字体不支持,使用transform:scale可以节省百分之九十工作量且保证页面宽高在任何情况下等比例缩放一.使用步骤 1.在src文件下的u ...

zoom和transform:scale()的区别

文章目录

1. 兼容行区别

2. 控制缩放的属性值不一样

3. zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置

4. 对文字的缩放规则不一致

5. 执行的渲染顺序不同

zoom和transform:scale()的区别相关推荐

最新文章

热门文章