html 图片自动裁剪,如何用CSS自动裁剪图片 - Thomas'博客

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 的特性，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

对于padding为百分比的时候，我画了一张图，希望有助于大家理解：

总结：就是你所需要的比例，就是width与padding-bottom的比例

用的时候，直接把.zoomImage当成img标签来用就可以了。