郁闷

兼容各浏览器的图片垂直水平居中效果

二月 24th, 2008 Traffic(1666)

最近有很多朋友都在问我：“有没有兼容IE和FireFox的图片垂直居中的方法？”。接到问题后我也查阅了网上的相关资料，虽然很多，但总是会出现这样或那样的问题。如：IE和FireFox不兼容，图片大小不确定就不好用等等。所以我决定自己写一个JavaScript的方法来解决这些问题。

首先，使用此方法的先决条件是：图片显示区域的宽、高必须已知，承载各图片对象的总体父对象的ID必须已知，而且需要按原比例缩放图片，使图片不失真。

可用区域的宽高：<div class="item"><img src="..." alt="..." /></div>，如果设置了“item”的宽为80px，高为100px，那么可用区域就是宽为80px，高为100px。如果设置了padding:4px;border:1px #CCC solid，那么增大的只是实际占用的区域，而可用区域还是原来的值不变。

承载各图片对象的总体父对象：<div id="main"> <div class="item"><img ... /></div> ... <div class="item"><img ... /></div> </div>，此时，“main”就是总体父对象的ID。

下面用一个实例来介绍此方法的应用。请看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .tit {width:500px;height:25px;line-height:25px;font-weight:bold;margin-top:10px;} #main {width:510px;height:145px;padding-top:10px;border:1px #CCC solid;} .item {display:inline;float:left;margin-left:10px;width:80px;height:100px;padding:4px;border:1px #999 solid;overflow:hidden;text-align:center;} .itemTxt {display:inline;float:left;margin:5px 0 0 10px;font-size:12px;width:88px;height:18px;line-height:18px;border:1px #999 solid;text-align:center;} #mains {width:610px;height:125px;padding-top:10px;border:1px #CCC solid;} .items {display:inline;float:left;margin-left:10px;width:100px;height:80px;padding:4px;border:1px #999 solid;overflow:hidden;text-align:center;} .itemTxts {display:inline;float:left;margin:5px 0 0 10px;font-size:12px;width:108px;height:18px;line-height:18px;border:1px #999 solid;text-align:center;} </style> <script type="text/javascript" language="javascript"> function setScope(obj,setW,setH) { var mainObj = document.getElementById(obj); var subObj = mainObj.getElementsByTagName("img"); for (i=0;i<subObj.length;i++) { divW = subObj[i].width; divH = subObj[i].height; if (divW > divH) { if (divW > setW) { valW = setW; valH = parseInt(setW * divH / divW); //目标高度 if (valH > setH) { valH = setH; valW = parseInt(setH * valW / valH); //目标宽度 } subObj[i].style.width = valW + "px"; subObj[i].style.height = valH + "px"; subObj[i].style.marginTop = parseInt((setH - valH) / 2) + "px"; } } else if (divH > divW) { if (divH > setH) { valH = setH; valW = parseInt(setH * divW / divH); //目标宽度 if (valW > setW) { valW = setW; valH = parseInt(setW * valH / valW); //目标高度 } subObj[i].style.height = valH + "px"; subObj[i].style.width = valW + "px"; } } else { if (divH < setH) { subObj[i].style.marginTop = parseInt((setH - divH) / 2) + "px"; } else if (divH > setH) { val = setW - setH >= 0?setH:setW; subObj[i].style.width = subObj[i].style.height = val + "px"; if (setH > val) { subObj[i].style.marginTop = parseInt((setH - val) / 2) + "px"; } } } } } </script> </head> <body> <div class="tit">图片边框为 Width：80px, Height：100px</div> <div id="main"> <div class="item"><img src="http://www.w3cui.org/images/article/48X48.gif" alt="48 X 48" /></div> <div class="item"><img src="http://www.w3cui.org/images/article/121X143.jpg" alt="121 X 143" /></div> <div class="item"><img src="http://www.w3cui.org/images/article/160X120.jpg" alt="160 X 120" /></div> <div class="item"><img src="http://www.w3cui.org/images/article/180X180.jpg" alt="180 X 180" /></div> <div class="item"><img src="http://www.w3cui.org/images/article/80X100.jpg" alt="80 X 100" /></div> <div class="itemTxt">48px X 48px</div> <div class="itemTxt">121px X 143px</div> <div class="itemTxt">160px X 120px</div> <div class="itemTxt">180px X 180px</div> <div class="itemTxt">80px X 100px</div> </div> <script type="text/javascript" language="javascript">setScope("main",80,100);</script> <div class="tit">图片边框为 Width：100px, Height：80px</div> <div id="mains"> <div class="items"><img src="http://www.w3cui.org/images/article/48X48.gif" alt="48 X 48" /></div> <div class="items"><img src="http://www.w3cui.org/images/article/121X143.jpg" alt="121 X 143" /></div> <div class="items"><img src="http://www.w3cui.org/images/article/160X120.jpg" alt="160 X 120" /></div> <div class="items"><img src="http://www.w3cui.org/images/article/180X180.jpg" alt="180 X 180" /></div> <div class="items"><img src="http://www.w3cui.org/images/article/80X100.jpg" alt="80 X 100" /></div> <div class="itemTxts">48px X 48px</div> <div class="itemTxts">121px X 143px</div> <div class="itemTxts">160px X 120px</div> <div class="itemTxts">180px X 180px</div> <div class="itemTxts">80px X 100px</div> </div> <script type="text/javascript" language="javascript">setScope("mains",100,80);</script> </body> </html>

下面详细介绍一下各主要部分的作用。

一、XHTML + CSS部分

1、父对象：

<div id="main"> <div class="item"><img src="..." alt="..." /></div> ... <div class="item"><img src="..." alt="..." /></div> </div>，“<div id="main">”就是各图片对象的总体父对象。

2、子对象：

<div class="item"><img src="48X48.gif" alt="48 X 48" /></div>，“<div class="item">”就是承载图片对象的子对象。

重点说明CSS中的两个属性：“display:inline;”和“text-align:center;”。因为各子对象都设置了“float:left; margin-left:10px;”，如果不设置“display:inline”的话在IE6下面就会出现双倍边距的Bug，设置此属性就可以有效地解决这个问题。（请参阅IE双倍边距BUG的现象及解决办法）

“text-align:center”设置了子对象中的内容水平居中于此对象。

“width:80px; height:100px;”设置了子对象可用区域的范围。宽80像素，高100像素。

二、JavaScript部分

1、方法的原理：

（1）整体思路：取得父对象下所有Img对象的集合，分别将各子对象中的图片按照比例缩小在子对象可用范围内。

（2）垂直居中原理：首先取得图片的高度，居中 = （子对象可用区域的高度 - 图片的高度） / 2。

（3）需要考虑的几种情况：以子对象的可用区域高大于宽为例：

第一种，图片的宽和高均小于可用区域。此时，只需要设置图片居中于子对象即可。

无论是图片的宽或高，只要任何一个超过了可用区域的范围时，判断图片的宽高比：

第二种，图片的宽比高大。此时，应该将图片的宽设置为子对象可用区域的宽，再按比例缩小高度。（因为，如果想等比例缩小到一定的范围，就应该先缩小最大的一条边，然后按照比例再缩小另外一条。）如果等比例缩小后的高度仍然比子对象可用区域的高大，将缩小后的高度再缩至和可用区域的高相同，按照同样的方法再等比例缩小宽度。最后使图片垂直居中于子对象。

第三种，图片的宽比高小。此时，应该将图片的高设置为子对象可用区域的高，再按比例缩小宽度。如果等比例缩小后的宽度仍然比子对象的可用区域的宽大，将缩小后的宽度再缩至和可用区域的宽相同，按照同样的方法再等比例缩小高度。最后使图片垂直居中于子对象。

第四种，图片的宽和高相同，并且都超出了子对象的可用范围。此时，只需要设置图片的宽和高为子对象可用区域最小的边的大小即可。如果子对象可用区域的高大于宽，则还要设置垂直居中。

第五种，图片的宽和高正好等于子对象可用的宽和高。这时是最幸福的了，什么也不用做。

2、方法的调用：

“<script type="text/javascript" language="javascript">setScope("main",80,100);</script>”。

三个参数分别为：父对象的ID名称，子对象可用区域的宽，子对象可用区域的高。

3、主要代码说明：

var mainObj = document.getElementById(obj);： //obj是作为参数传递进来的，是父对象的ID名称。“document.getElementById(obj)”，取得某个对象，包括其属性和方法。

var subObj = mainObj.getElementsByTagName("img");： //取得父对象下所有HTML标签为“img”的子对象。“subObj”是一个集合，包含所有父对象下的“img”子对象。“subObj.length”取得集合中子对象的数量，应用时写法为：“subObj[i]”（i以0开始）。如果分别设置，需要用到循环。

“divW = subObj[i].width;”和“divH = subObj[i].height;”： //设置各图片对象的宽和高。（注意：在设置高度和宽度时一定要在后面加上“px”，不加上在FireFox下视为无效的属性值，不起作用。）

“setW / H”为子对象的可用区域宽和高的比例，“divW / H”为图片宽和高的比例，要是图片的比例和可用区域的相同，则先要确定图片的一个边（即上面几种情况确定），在按照：setW / setH = divW / divH的公式进行等比例计算。如：setW：80 / setH：100 = divW / divH：150，则divW = setW：80 * divH：150 / setH：100，则等比例缩小图片后的宽度为120。

“parseInt(divW)”： //parseInt的作用是将字符串、非整数的参数转换为整数形式。

到这里，此方法的思路和主要部分的功能就全部介绍完了。下面再介绍几种使图片垂直居中的其他方法和利弊。

1、不设置承载图片的对象的宽和高，只设置padding（边框距内容之间的距离）。

优点：比较简单实用。缺点：由于对象自适应图片的大小，使对象的大小不确定，会造成页面混乱。

2、设置承载图片的对象的CSS属性为“display:table;”（强制将DIV转换为Table）。

优点：简单实用。缺点：IE下不起作用。

3、设置承载图片的对象的“position:relative;”，设置图片的“position:absolute;”，先将图片的上边距下移50%高度，在向上移动一半高度的50%（如果对象的高度为100px，则先将图片移动到距离上边50px的位置，再向上移动25px，最终图片距离顶边的距离是25px）。

优点：只需要设置CSS就可以，比较简单。缺点：各浏览器的兼容性比较差，而且，有时如果图片的大小不确定时还会出现一想不到的问题。

解决任何问题从来都不是只有一种方法，要学会从中选取最有效、最简便的方法才是最好的选择。随着Web2.0时代的到来、随着XHTML+CSS越来越深入人心、企业对人才的需求，我建议广大网页设计们能够更多的掌握JavaScript技术，这样才能设计出更好的作品。

文字垂直居中请参阅《文字垂直居中》一文。

Posted by: 郁闷

上一话题：傲游下广告屏蔽功能带来的麻烦