组件等比例放大——scale和zoom

一条大河全靠浪

已于 2023-05-04 17:29:35 修改

阅读量1.4k

点赞数

分类专栏：前端样式前端实践文章标签：缩放 html 前端

于 2023-05-04 10:22:43 首次发布

本文链接：https://blog.csdn.net/HYeeee/article/details/130288472

版权

前端实践同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

前端样式

4 篇文章 0 订阅

订阅专栏

文章探讨了CSS中的scale和zoom属性在缩放元素时的不同行为，包括缩放基准点、空间占用和对页面布局的影响。zoom在Firefox中不受支持，而scale则没有这个问题。在处理组件S在不同页面的缩放需求时，使用scale可能导致内容高度不足和锚点定位问题，解决方案是动态调整元素高度。若不考虑Firefox兼容性，zoom是个更直接的选择。

摘要由CSDN通过智能技术生成

scale和zoom的区别

zoom的缩放是相对于左上角的；而scale默认是居中缩放，可以通过transform-origin修改基准点
zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化。
对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸
兼容性问题。firefox下不支持zoom；scale针对IE9+

由于zoom兼容性问题，我们采用scale进行缩放。

需求描述

有个组件S，需要在A页面显示本来的大小（用于截图发邮件），在B页面放大1.25倍（用于详情查看，需要放大一点）

在B页面还有锚点的交互，和滚动定位，可以定位到组件S的某个区域上。大概这样
在这里插入图片描述

transform: scale(1.25);
transform-origin: top;
或者
zoom: 1.25;

scale问题和解决

问题： scale放大，占据宽高不变，导致内容高度不够，锚点定位到最后，菜单上移消失问题
解决: 在组件S加载完之后，获取放大后的高，在html中设置该高度


   handleDomLoaded() {
      const sketchDom = document.getElementById('sketch')
      const { width, height } = sketchDom.getBoundingClientRect()
      this.heightStyle = { height: height + 'px'}
 }