轮播图图片大小不统一

港控/mmm° 2023-03-06 03:50 198阅读 0赞

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

## 实现样式 ##

html部分：

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 的值。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70][]

轮播图代码

<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>

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

## 关于兼容性： ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70]: /images/20230208/58d517700cf1411f9a618bb4a063c51b.png