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