当前位置:网站首页 -> 常见问题

如何让图片按比例响应式缩放、并自动裁剪的css技巧,同时也适用于一些轮播父容器响应式缩放
来源:万云网络    添加时间:2017-9-22 10:52:11

首先,今天准备了四张宽高各不相同的素材,如下图所示:

先展示一下最终效果: 
(注意这里的裁剪是以中间为基点,裁剪的是上下或左右两边)

(宽高1:1):

(宽高4:3):

(宽高3:4):


实现样式

html部分:

<divclass="zoomImage"style="background-image:url(images/test1.jpg)"></div>

css部分:

.zoomImage{width:100%;height:0;padding-bottom:100%;overflow:hidden;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;}



原理剖析

width:100%;height:0;padding-bottom:100%;overflow:hidden;

样式中的上面四句主要目的是为了让这个div以1:1的大小呈现, 

虽然height:0;高度为0,但是它的padding值为100% 
这是因为在padding为百分比的时候,是根据他父层的宽度来进行计算的。 
在一点MDN关于padding的文档 也有说到,有兴趣的同学可以看看。

background-position: center center;background-repeat: no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;

后面5句就是利用了css3中的 background-size:cover 的特性,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。


上一篇:在手机端qq客服代码点击弹出qq聊天窗怎么实现那?
下一篇:css 使图片水平垂直居中

TEL:4008-099-690

邯郸网络公司、邯郸网站建设、邯郸网站制作、软件开发、微商城、400电话
Copyright 2014-2019 版权所有:邯郸开发区万云网络技术服务有限公司
冀ICP备 15001040号  冀公网安备 13040302001007号
工商网监:HB13040301201611150002