如何让图片按比例响应式缩放、并自动裁剪的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="data:images/banner/main1.jpg" alt="Third slide" style="width: 100%;height: 500px;"></div> --></div><!-- 轮播（Carousel）导航 -->

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

关于兼容性：

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

轮播图图片大小不统一相关推荐

解决轮播图图片大小不一的问题！
要把大小不一样的图片做成整齐排列的轮播,如果直接固定宽高会把图片伸缩变形的,不固定又会让图片不整齐,用ps截图截成一样的大小难度系数略高.看似头大的问题,现在解决,只需2步: 1.假如有4张图,我们就 ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
微信小程序—swiper轮播图图片不显示的解决方法
swiper轮播图图片不显示的解决方法遇到图片无法显示的问题,是样式问题在wxss里面新型修改设置宽度 .container{width: 750rpx; } .container swiper ...
微信小程序轮播图单独添加图片、修改轮播图图片、单独修改某张图片
小老弟上课的基本见解,有错误欢迎大牛们指正  <text>pages/swiper/swiper.wxml< ...
【Web前端】【疑难杂症】轮播图图片自适应显示问题（bootstrap3轮播图）
关键代码 html <div id="header" class="carousel slide"><! ...
【uniapp】轮播图图片适配
需求:轮播图需要根据图片的大小进行适配,下面的文字跟随轮播图大小进行适配移动逻辑: ①在swiper里的图片加载完成的时候,@load方法去获取图片的宽高,又因为图片的宽高需要适配手机的屏幕,所以需 ...
html ul 圆点轮播图,实现轮播图图片重叠及小圆点
轮播图 /* 设置图片的容器大小 */ .img-list{ width: 300px; height: 300px; /* 上下100 左右居中 */ margin: 100px auto; /* ...
Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...
初试--轮播图--图片切换
尝试使用图片切换做轮播图 <style>*{margin: 0;padding: 0;list-style: none;}.box{width: 500px;height: 300px;p ...

轮播图图片大小不统一

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

实现样式

关于兼容性：

轮播图图片大小不统一相关推荐

最新文章

热门文章