《
CSS网页制作技巧 图片的自适应居中和兼容处理》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334502013.htm
x>200,y>200，且x=y的图片：
设置了空标签的高，使得与它并列的。
前几天在做腾讯微博的微卖场的时候，碰到需要做图片居中的需要。也就是说，商品列表中的图片需要居中显示。由于图片是卖家自己把商品图片链接过来，商品图片的大小不做限度和过滤。所以咱们须要做的是，让图片在容器当中程度居中、垂直居中、图片自适应容器大小。图片原图大小和在容器中显示的大小有这样的关联：
--> [
网站建设之]CSS网页制造技能:图片的自适应居中跟兼容处置
x>200,y<=200的图片：
为了更好地看到效果，先把图片的原图展现出来，以便和它在列表容器当中做对照。
<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,css网页制作实用技巧9则; 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
论断是，_width和_height都写上,CSS网页代码编写隔行换色的技巧，这样做有95%完善了。另外对CSS Expression的机能做优化,CSS缩写的语法规则，猫哥做了详尽的剖析供大家参考,CSS编辑器：TopStyle Pro使用技巧。针对IE6加上_width: expression(function(el){el.style.width = el,CSS绝对定位和浮动的分栏布局.offsetWidth > 200 ? ’200px’ : el.offsetWidth + ‘px’;counter(’2′);}(this));这句。
假设容器大小为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 ；
图片自适应居中实用的场景有商品列表、相册、搜寻图片成果列表等。如何使用静态的办法实现这样的效果呢？看了网上的一些方式，加上本人的一些阐明，做了多少个demo，供大家参考。
反之，如仅使用_height，能对竖图起作用，对横图不起作用。
IE6的杯具
对图片容器设置行高为容器的高。
对于图片的自适应，使用max-width和max-height。冷淡无情的事实就是IE6及以下不支撑max-width和max-height。以上用于修复IE6中max-height,max-width的表白式_width和 _height，在运行时还存在小问题。用不同的图片试了一下，对宽和高至少一个值小于或即是200的图片，可以完美地展示，然而若宽和高两者都大于200，则会呈现一些小问题,CSS给图片加边框。
在img外设置两层div，最外层div的款式设置为display:table-cell。因为IE6、7中对table-cell不支持，所以针对IE6、7，设置了position来实现居中。在IE8中，假如图片自身的宽比容器的广大，则容器宽度会被撑开，这里使用针对IE8的width为200px处理。
设置行高line-height
用与图片并列的一个空标签
若_width、_height独自使用，则可能使对应的图片显示为幻想状况。如仅使用_width，能对横图起作用，对竖图不起作用。
应用透明图片，在该图片上设置背景图。
x<=200,y>200的图片：
x<=200,y<=200的图片：
以上实现的后果为：
<,CSS纯英文数字自动换行;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
若_width和_height两者一起使用，x>200,y>200，且x>y的图片，会显示理想的状态。x>200,y>200，且x<y的图片，会显示为200*200的大小，但是没有按比例缩放：（。
<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; } ,css类库收藏.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
Tag：兼容 处理 适应 图片
网页制作 技巧
<div class="wrap_4"> <img src=",CSS简写指南;400_300.jpg" alt="" > </div>,CSS简写总结;
/* 设置行高 */ .wrap_4 { width:200px; height:200px; text-align:center; border:1px solid red; font-family: arial; line-height:198px; font-size:0; _font-size:180px; } .wrap_4 img { display:inline-block; vertical-align:middle; max-height:200px; max-width:200px; }
查看demo
这种方法适用于小图片，即商品图都比容器小，不需要缩放，加载状态图片能够使用这个方法。这个方法的局限性在于，商品图片需要在服务器端过滤，或者先等比例缩小，再在阅读器端显示。
(责任编辑：网站建设)
CSS网页制作技巧 图片的自适应居中和兼容处理相关文章