之前在做一个活动的管理后台，有一个功能需要在修改活动编辑时，左侧有一个缩小的预览图进行相对应的同步，右侧的面板是可以自由拉升的，也就是长度不固定。 如图所示。
第一个想到的方案，就是用css3的transform:scale来进行实现。比如左右两侧都渲染相同页面，将左侧预览图的渲染缩小到0.3倍，也就是 scale(.3)
当使用transform:scale(.3)时，你会发觉，虽然左边的预览图缩小到了0.3倍，但是它占据的空间和右边的大图是一样的。
此时对于左侧预览图，你可以用margin负值将它的空间进行变小。由于我们的左侧和右侧是联动的，当我调整右边大图的高度时，预览图的高度也会跟着变化，导致预览图的顶部不固定
google了一下，发觉zoom也可以进行页面的缩放，但是跟transform:scale有点区别，因为此文就是对比两者之间的一个差异
zoom
我们最开始接触zoom应该是在兼容IE6、IE7的年代，比如*zoom: 1，可以用来清除IE6/7诡异的浮动问题
目前，这个属性除了FireFox，chrome和移动浏览器已经得到了很好的运用，除了处理IE的兼容性外，它可以用来对页面进行缩放
它的取值可以为：
百分比值：如，zoom:50%，表示缩小到原来的一半
数值：zoom:0.5，表示缩小到原来的一半
normal：zoom:normal等同于zoom:1
注意点：zoom的取值不能为负数
transform:scale
tranform:scale，IE9+以及其他主流浏览器都支持，取值为transform: scale(<x> [<y>]),
或者可以用transform:scaleX()、transform:scaleY()来单独对x轴或者y进行缩放。此外，里面的数值可以为负数，当为负数时，页面整个倒过来了,类似transform: rotate(180deg);的效果，如图所示
两者比较
相同点
可以对页面缩放
不同点
a. 兼容性方面：
zoom可用于所有IE、chrome、手机浏览器
scale在IE9+都可兼容
b. 取值方面
scale可以只控制一个方向的缩放，比如X轴，并且可以为负数，zoom则不行
c. 缩放效果
zoom相对于页面左上角缩放，它可以改变元素缩放后所占据的空间，比如100*100的页面，缩小一倍后，占据的空间为50*50，
zoom缩放后的最小字号为12像素，也就是说，即使你把页面做小了100倍，字体最小也会是12px，也由于这个原因，会影响页面缩放后的布局错乱，会导致缩放后的页面进行重新渲染。以掘金为例，用zoom缩小到0.3倍的时候，是下面这样的效果
scale的缩放相对于页面居中缩放，它不会改变元素所占据的空间，也即是说，100*100的页面，缩小一倍后，占据的空间，还是为100*100。还是以掘金为例，红色框中的li已经缩放到0.3倍，可是它占据的空间还是没变，还是为空色框部分
scale的文字可以等比缩放，比如你缩小100倍，文字也会缩小100倍，它相当于页面的整体缩放，因此不会导致布局的变化，页面也不会重新渲染
在chrome浏览器下，scale和zoom一起使用，会是效果达到一个叠加，也就是说，放大1倍，实际效果就是2倍
总结
正常的页面缩放，我们还是使用 transform:scale就好了，缩放效果好，也没有性能问题。对于我所遇到的问题，最后的解决方案是使用transform:scale进行缩放，把左边预览图的高度写死，然后通过margin负值的方式解决。
本文算是一个知识的探讨，深究原因，多学习
后记
小弟自己运营了一个前端小站，每周一、三、五更新几篇精华技术文章，欢迎来访： xianyulaodi.github.io/fed-sites/
