如何让图片按比例响应式缩放、并自动裁剪的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的支持性比较好,所以这一点应该是不用担心的。