CSS3 transform 缩放

html-css017

CSS3 transform 缩放,第1张

这是一个缩放的transform属性,y值可以省略,如果y值省略的话,那默认就和x值一样。

举例:

这个例子的执行效果就是,当把指针hover到这个div上的时候,那这个div会放大到原来的1.1倍大。相应的,如果把值改为0.5,hover的时候x和y就会缩小到原来的二分之一。

需要注意的是它的transfom-origin是中心点

只缩放X轴上的倍数。

3、transformY:scale(y)

只缩放Y轴上的倍数。

以上的缩放点都是中心点。

由于字体是“有级缩放”(就像风扇的档位调节开关,只能调1档、2档、3档这些,不能1.5档,或者2.1111档等),不是“无级缩放”(就像音响上的音量旋钮,可以调到任意的位置),因此要想真正实现按百分比来缩放是不太现实的。一个变通的方法是利用css3的新长度单位rem(根元素的字体大小),其默认值是16px,那么1.5rem就是16*1.5=24px,0.75rem就是16*0.75=12px。比如font-size:1.5rem

有几个方法,各有优劣 你自己斟酌,部分也说不细需要你自己百度具体做法:

定死宽高中的一个,另一个未定死的数值就会按比例来,如果多了overflow切掉,好处是容易操作,兼容性好,坏处很多,图片内容不能全部展示、可能切掉希望展示的内容只适用于很少情况。

设为背景图使用css3的background-size配合background-position来解决,contain和cover两个值效果不错,基本能解决你想要的所有效果,缺点是不兼容低版本浏览器、需要通过内联css样式解决、不是img标签浏览器搜索引擎不友好、不符合HTML语义化标准。

使用css3的flex定位,网上有具体的操作,一时说不明白都是用得到的时候自己去搜。好处是完全语义化符合标准,基本能解决你的问题,缺点是,学习成本高,兼容性稍差,有些手机上表现有问题。

js方案,都js了自己写就是了。缺点是需要用js,写不好会有bug,相对麻烦一些,加载时候页面可能会有抖动。

服务器方案,客户上传的图片到服务器走一圈,做成自己希望的大小,而且有一个服务器插件不仅可以截取到目的大小而且还能针对图片内容截取(例如尽可能保留人物面部、智能判断页面重点),这个试过效果很不错,不过具体哪个插件不记得了,估计搜也能搜到。优点是比较智能自己设置好了几乎完美,几乎不再需要麻烦的css,页面也相对比较规整,缺点是需要服务器端支持。

如果可以比拘泥于容器,让容器兼容图片,网上有很多的gallery插件,类似谷歌图片,摆布也不错,优点是不用考录图片和div的问题了,缺点是需要从新设计及相关技术....