MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 【转载】怎么让图片按比例响应式缩放、并自动裁剪的

【转载】怎么让图片按比例响应式缩放、并自动裁剪的css技巧

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
【转载】如何让图片按比例响应式缩放、并自动裁剪的css技巧

原文: 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的支持性比较好,所以这一点应该是不用担心的。

 

文章评论

Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
程序员应该关注的一些事儿
程序员应该关注的一些事儿
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
 程序员的样子
程序员的样子
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
漫画:程序员的工作
漫画:程序员的工作
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员必看的十大电影
程序员必看的十大电影
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
一个程序员的时间管理
一个程序员的时间管理
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员的鄙视链
程序员的鄙视链
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
为什么程序员都是夜猫子
为什么程序员都是夜猫子
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
鲜为人知的编程真相
鲜为人知的编程真相
总结2014中国互联网十大段子
总结2014中国互联网十大段子
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我是如何打败拖延症的
我是如何打败拖延症的
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
我的丈夫是个程序员
我的丈夫是个程序员
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
中美印日四国程序员比较
中美印日四国程序员比较
程序员都该阅读的书
程序员都该阅读的书
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
代码女神横空出世
代码女神横空出世
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
老程序员的下场
老程序员的下场
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
编程语言是女人
编程语言是女人
那些争议最大的编程观点
那些争议最大的编程观点
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
10个调试和排错的小建议
10个调试和排错的小建议
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有