zoom

一、 style 部分

//打底 .BottomLayer { width:600px; height:600px; background-color:green }

html 部分

div class="BottomLayer "> </div>

如图：

二、 在BottomLayer 中在添加一个class为zoom的div

<div class="BottomLayer "> <div class="zoomOrScale"> </div> </div>

添加一个样式：

.zoomOrScale{ width:300px; height:300px background-color:yellow }

此时他是这样的

三、我们给他设置scale和zoom属性，同时为0.5,(注意：小于1时为缩放)，

zoom：0.5:

.zoomOrScale{ width:300px; height:300px background-color:yellow; zoom：0.5 }

如图： scale(0.5):

.zoomOrScale{ width:300px; height:300px background-color:yellow; transform:scale(0.5); }

如图： 总结：zoom是以原图片位置的右上角为原点，进行缩放。而transform:scale以中心点为原点进行缩放的（个人认为）。

注：以上文章均为个人学习中记录

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。