SQL吧 网站源码下载 企业网站源码下载 免费网站源码下载

当前位置: 主页 > 教程 > 网页 > CSS教程 >

CSS技巧:图片的自适应居中和兼容处置惩罚

时间:2013-03-21 14:23来源:网络整理 作者:SQL吧 点击:
CSS技巧:图片的自适应居中和兼容处理
企业站建365全包!先制作!后付款!600多套模版任你选择!晴网www.138.la专注企业站建仿站、域名、空间、云主机、服务器, 咨询电话:020-29031983 qq:2769485357

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

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

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

x<=200,y<=200的图片:
x<=200,y<=200的图片

x>200,y<=200的图片:
x>200,y<=200的图片

x<=200,y>200的图片:
x<=200,y>200的图片” title=”x<=200,y>200的图片”></p>
<p>x>200,y>200,且x>y的图片:<br />
<img src=

x>200,y>200,且x=y的图片:
x>200,y>200,且x=y的图片

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

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

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

<div class="wrap_1"><a href=""><img style="background-image:url(100_100.jpg)" src="wrap_loading.png" alt=""  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" alt="" ></a></div></div>
/* table-cell方式 */
.wrap_2_outer { border:1px solid red; width:200px; height:200px; display:table-cell; font-size:0; text-align:center; vertical-align:middle; *position:relative;padding:0; overflow:hidden; }
.wrap_2_inner { text-align:center; vertical-align:middle; width:200px9; *width:auto;font-size:0; *position:absolute;*top:50%;*left:50%;}
.wrap_2_inner img { max-height:200px; max-width:200px; *position:relative;*bottom:50%;*right:50%;margin:0 auto;}
        

查看demo

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

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

<div class="wrap_3"><a href=""><img src="100_100.jpg" alt="" ></a><i></i></div>
/* 空标签 */
.wrap_3 { width:200px; height:200px; overflow:hidden; text-align:center; font-size:0; border:1px solid red;  }
.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

(责任编辑:编辑部)
顶一下
(0)
0%
踩一下
(0)
0%
0
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
栏目列表
推荐内容