轮播图图片大小不统一

如何让图片按比例响应式缩放、并自动裁剪的css技巧

实现样式

html部分：

<div class="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;
}

 想要更改比例   改 padding-bottom 的值。

 轮播图代码

<!-- 轮播（Carousel）项目 -->
		<div class="carousel-inner">
			<div class="item active">
				<div class="zoomImage" style="background-image:url(images/banner/main1.jpg)"></div>
			</div>
			<div class="item">
				<div class="zoomImage" style="background-image:url(images/banner/main2.jpg)"></div>
			</div>
			<div class="item">
				<div class="zoomImage" style="background-image:url(images/banner/main3.jpg)"></div>
			</div>
			<div class="item">
				<div class="zoomImage" style="background-image:url(images/banner/main4.jpg)"></div>
			</div>
			<!-- <div class="item">
				<img src="images/banner/main1.jpg" alt="Third slide" style="width: 100%;height: 500px;">
			</div> -->
		</div>
		<!-- 轮播（Carousel）导航 -->

 就可以变成一个：不用根据图片尺寸，都可以根据比例自适应的轮播图啦。

关于兼容性：

这个样式里有利用到CSS3的属性： background-size:cover;
那当我们做响应式、移动端的页面时，肯定也要用到CSS3的媒体查询或者其他的CSS3样式，而且移动端的浏览器对CSS3的支持性比较好，所以这一点应该是不用担心的。