【转载】如何让图片按比例响应式缩放、并自动裁…
2018-06-24 01:54:45来源:未知 阅读 ()
原文: http://blog.csdn.net/oulihong123/article/details/54601030
响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时,
如果想要图片按比例缩放,
最简单的就是把img宽度设为100%,
不设置高度,高度就会自动跟着高度缩放
但是如果要达到的效果是,要让图片的宽高要按一定的比例显示,如1:1 、4:3 等,
然而图片尺寸不是这个比例,又不想让图片拉伸变形,自动裁剪掉两边多余部分、这该如何解决呢?
首先,今天准备了四张宽高各不相同的素材,如下图所示:
先展示一下最终效果:
(注意这里的裁剪是以中间为基点,裁剪的是上下或左右两边)
(宽高1:1):
(宽高4:3):
(宽高3:4):
实现样式
html部分:
<div class="zoomImage" style="background-image:url(images/test1.jpg)"></div>
- 1
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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
原理剖析
width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;
- 1
- 2
- 3
- 4
样式中的上面四句主要目的是为了让这个div以1:1的大小呈现,
虽然height:0;高度为0,但是它的padding值为100%
这是因为在padding为百分比的时候,是根据他父层的宽度来进行计算的。
在一点MDN关于padding的文档 也有说到,有兴趣的同学可以看看。
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
- 1
- 2
- 3
- 4
- 5
后面5句就是利用了css3中的 background-size:cover 的特性,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
对于padding为百分比的时候,我画了一张图,希望有助于大家理解:
总结:就是你所需要的比例,就是width与padding-bottom的比例
用的时候,直接把.zoomImage当成img标签来用就可以了。
关于扩展到响应式轮播:
在这里我拿swiper轮播图插件举例:
这个插件是目前应用较广泛的移动端网页触摸内容滑动js插件,balabala…
这个插件本来就是响应式的没错,
但有两个问题:
1、这个轮播图你必须要给他一个高度,但高度不是固定死的,是需要按比例的,
(除了用js,或者每个分辨率用媒体查询设置一下高度/这个简直不要太繁琐)
所以我们还可以用刚刚上面的padding方法,让它成为一个可以按比例缩放的容器
2、轮播图里的图片不是需要的比例怎么办(又回到这个问题上来了,现在知道该怎么做了吧)
优化前:
优化后:
就可以变成一个:不用根据图片尺寸,都可以根据比例自适应的轮播图啦。
关于兼容性:
这个样式里有利用到CSS3的属性: background-size:cover;
那当我们做响应式、移动端的页面时,肯定也要用到CSS3的媒体查询或者其他的CSS3样式,而且移动端的浏览器对CSS3的支持性比较好,所以这一点应该是不用担心的。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 如果是自学WEB前端的话,该如何才能找到一份7K实习生工作呢 2020-06-04
- 前端如何学习? 2020-06-04
- 如何成为一名优秀的web前端工程师 2020-06-02
- 零基础小白转行如何入门学习web前端 2020-06-01
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash