width:100%;
height:0;
padding-bottom:100%;
overflow:hidden;
background-position:centercenter;
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:centercenter;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
后面5句就是利用了css3中的background-size:cover的特性,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
对于padding为百分比的时候,我画了一张图,希望有助于大家理解:
总结:就是你所需要的比例,就是width与padding-bottom的比例
用的时候,直接把.zoomImage当成img标签来用就可以了。