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

二、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下不起作用。