使用CSS实现图片“切割”

最近在国外网站上买了个bootstrap响应式模板，在使用发现产品列表（图片列表）时发现产品图片大小如果不统一的话，整个页面就错位了；查看了css文件发现，img所在的容器宽度被栅格固定死了，img标签中宽度被设置了：img{    width:100%;}当然对于长宽比例一样的图片来说，不会出现问题。但是我网站的图片长宽比例不一致，这时只能宽度固定为100%，高度超出部分就实现“切割”；方式如下：

HTML:

CSS:

p.image-container{    

width:100%;    

height:0;    

padding-bottom:90%;    

overflow:hidden;

}

p.image-container img{

    width:100%;

}