CSS教程:图片的自适应居中和兼容处理

tianzhaobin111

tianzhaobin111

2016-02-17 02:00

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享CSS教程:图片的自适应居中和兼容处理的教程,热爱PS的朋友们快点看过来吧!

前几天在做腾讯微博的微卖场的时候,遇到需要做图片居中的需求。也就是说,商品列表中的图片需要居中显示。因为图片是卖家自己把商品图片链接过来,商品图片的大小没有做限制和过滤。所以我们需要做的是,让图片在容器当中水平居中、垂直居中、图片自适应容器大小。图片原图大小和在容器中显示的大小有这样的关系:

假设容器大小为200像素*200像素,图片的宽为x 像素,高为y 像素,则: 当x=200,y=200时,图片位于容器中的中间,即水平居中和垂直居中,显示在容器的图片大小为:宽=x,高=y ; 当x200,y=200时,显示在容器中的图片大小为:宽=200,高=200y/x ; 当x=200,y200时,显示在容器中的图片大小为:宽=200x/y,高=200 ; 当x200,y200,且xy,显示在容器中的图片大小为:宽=200,高=200y/x ; 当x200,y200,且xy,显示在容器中的图片大小为:宽=200x/y,高=200; 当x200,y200,且x=y,显示在容器中的图片大小为:宽=200,高=200 ;

为了更好地看到效果,先把图片的原图展示出来,以便和它在列表容器当中做对比。

x=200,y=200的图片:
CSS教程:图片的自适应居中和兼容处理,PS教程,图老师教程网

x200,y=200的图片:
CSS教程:图片的自适应居中和兼容处理,PS教程,图老师教程网

x=200,y200的图片:
CSS教程:图片的自适应居中和兼容处理,PS教程,图老师教程网

x200,y200,且x=y的图片:
CSS教程:图片的自适应居中和兼容处理,PS教程,图老师教程网

图片自适应居中适用的场景有商品列表、相册、搜索图片结果列表等。如何使用静态的方法实现这样的效果呢?看了网上的一些方法,加上自己的一些说明,做了几个demo,供大家参考。

使用透明图片,在该图片上设置背景图。

这种方法适用于小图片,即商品图都比容器小,不需要缩放,加载状态图片可以使用这个方法。这个方法的局限性在于,商品图片需要在服务器端过滤,或者先等比例缩小,再在浏览器端显示。

div class="wrap_1"a href=""img style="background-image:url(100_100.jpg)" src="wrap_loading.png" width="200" height="200"/a/div
/* 图片的背景图方式 */.wrap_1 { width:200px; height:200px; border:1px solid red; }.wrap_1 img { display:block; background-repeat:no-repeat; background-position:center; }

查看demo

设置display为table-cell

在img外设置两层div,最外层div的样式设置为display:table-cell。因为IE6、7中对table-cell不支持,所以针对IE6、7,设置了position来实现居中。在IE8中,如果图片本身的宽比容器的宽大,则容器宽度会被撑开,这里使用针对IE8的width为200px处理。

div class="wrap_2_outer"div class="wrap_2_inner"a href=""img src="100_100.jpg"

查看demo

用与图片并列的一个空标签

设置了空标签的高,使得与它并列的。

div class="wrap_3"a href=""img src="100_100.jpg" }.wrap_3 i { display:inline-block; width:0; height:100%; overflow:hidden; margin-left:-1px; font-size:0; line-height:0; vertical-align:middle; }.wrap_3 img { vertical-align:middle; max-height:200px; max-width:200px; }

查看demo

设置行高line-height

对图片容器设置行高为容器的高。

div class="wrap_4" img src="400_300.jpg"

查看demo

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

以上实现的效果为:

CSS教程:图片的自适应居中和兼容处理,PS教程,图老师教程网

IE6的杯具

对于图片的自适应,使用max-width和max-height。冷酷无情的现实就是IE6及以下不支持max-width和max-height。以上用于修复IE6中max-height,max-width的表达式_width和 _height,在运行时还存在小问题。用不同的图片试了一下,对于宽和高至少一个值小于或等于200的图片,能够完美地展示,但是若宽和高两者都大于200,则会出现一些小问题。

若_width和_height两者一起使用,x200,y200,且xy的图片,会显示理想的状态。x200,y200,且xy的图片,会显示为200*200的大小,但是没有按比例缩放:(。

CSS教程:图片的自适应居中和兼容处理,PS教程,图老师教程网

若_width、_height单独使用,则能够使对应的图片显示为理想状态。如仅使用_width,能对横图起作用,对竖图不起作用。

CSS教程:图片的自适应居中和兼容处理,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

反之,如仅使用_height,能对竖图起作用,对横图不起作用。

CSS教程:图片的自适应居中和兼容处理,PS教程,图老师教程网

结论是,_width和_height都写上,这样做有95%完美了。另外对CSS Expression的性能做优化,猫哥做了详尽的分析供大家参考。针对IE6加上_width: expression(function(el){el.style.width = el.offsetWidth 200 ? ’200px’ : el.offsetWidth + ‘px’;counter(’2′);}(this));这句。

展开更多 50%)
分享

猜你喜欢

CSS教程:图片的自适应居中和兼容处理

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS教程:图片的自适应居中和兼容处理

用CSS控制图片自适应大小

Web开发
用CSS控制图片自适应大小

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

用CSS使图片自适应显示宽度

Web开发
用CSS使图片自适应显示宽度

网页制作CSS教程:自适应圆角

Web开发
网页制作CSS教程:自适应圆角

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

CSS让图片垂直居中和底端对齐的代码

Web开发
CSS让图片垂直居中和底端对齐的代码

如何用CSS使图片自适应显示宽度

Web开发
如何用CSS使图片自适应显示宽度

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

HTML大纲算法对结构的影响

HTML大纲算法对结构的影响

巧用好照片软件打造轻盈白皙肌肤

巧用好照片软件打造轻盈白皙肌肤
下拉加载更多内容 ↓