zoom和transform:scale()的区别

最新推荐文章于 2023-09-04 17:02:52 发布

Eva3288

最新推荐文章于 2023-09-04 17:02:52 发布

阅读量2.2k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/Eva3288/article/details/108147321

版权

css 专栏收录该内容

12 篇文章

订阅专栏

文章目录

总结：

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>