对class="imgBox"的元素内的图片自动等比例缩小,本例放在ul中,利用li可以让图片有边框和背景色
图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max-width和max-height,而<img>标签内不设定widht和height即可。
ie7已经支持max-width和max-height,这是为数不多的好消息之一。
但是对于ie6及以前的版本,就只能用js来设置了。
在 ff 2.0 / ie6 / ie7 / op 8.5+ / sa 3 中测试通过。
不过垂直方向在 ff 和 sa 中稍微有些错位,还需解决。
希望大家来测试找bug
注意:垂直居中的关键在于文档的dtd类型!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片自动等比例缩小且垂直居中</title> <!--[if lte IE 6]> <script type="text/javascript" language="javascript"> function imgFix() { //定义要限制的图片宽高,这个宽高要同style里面定义的相同,小于限定高宽的图片不操作 var widthRestriction = 200; var heightRestriction = 200; var allElements = document.getElementsByTagName('*') for (var i = 0; i < allElements.length; i++) { if (allElements[i].className.indexOf('imgBox') >= 0) { var imgElements = allElements[i].getElementsByTagName('img'); for (var j=0; j < imgElements.length; j++) { if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction ) { if ( imgElements[j].width > imgElements[j].height) { imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width); imgElements[j].width = widthRestriction; } else { imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height); imgElements[j].height = heightRestriction; } } if ( imgElements[j].height < heightRestriction ) { imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px"; } } /*for j*/ } }/*for i*/ } window.onload = imgFix; </script> <![endif]--> <style type="text/css"> <!-- * { margin:0; padding:0; } body { font: 8px/1em serif; /* 字号会影响图片的垂直位置 */ } .imgBox li { list-style:none; width:200px; /* 宽度 */ height:200px; /* 高度 */ background:#ccc; border:1px solid #666; text-align:center; margin:5px; line-height:200px; } .imgBox img { max-width:200px; /* 宽度 */ max-height:200px; /* 高度 */ vertical-align:middle; } --> </style> </head> <body> <ul class="imgBox"> <li><img src="http://www.ddcat.net/tebie/coco/img/coco_20070618_03.jpg" alt="img" /></li> <li><img src="http://www.ddcat.net/tebie/coco/img/coco_20070618_04.jpg" alt="img" /></li> <li><img src="http://www.ddcat.net/bbs2007/images/style_1/zh-cn/redirect_logo.gif" alt="img" /></li> <li><img src="http://www.ddcat.net/blog/templates/ddcat2007/img/logo.gif" alt="img" /></li> </ul> </body> </html>
同时加载多个方法
<!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> <script type="text/javascript" language="javascript"> function imgFix(selector, width, height) { function hasClass(selector, thisClass){ var classes = thisClass.split(" "); for (var i=0;i<classes.length;++i) { if (classes[i] == selector) { return true; } } return false; }; //定义要限制的图片宽高,这个宽高要同style里面定义的相同,小于限定高宽的图片不操作 //alert(selector); var widthRestriction = width; var heightRestriction = height; var allElements = document.getElementsByTagName('*'); for (var i = 0; i < allElements.length; i++) { //if (allElements[i].className.indexOf(selector) >= 0) { if (hasClass(selector, allElements[i].className)) { var imgElements = allElements[i].getElementsByTagName('img'); for (var j=0; j < imgElements.length; j++) { if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction ) { if ( imgElements[j].width > imgElements[j].height) { imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width); imgElements[j].width = widthRestriction; } else { imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height); imgElements[j].height = heightRestriction; } } if ( imgElements[j].height < heightRestriction ) { imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px"; } } /*for j*/ } } /*for i*/ } window.onload = function(){ imgFix("imgBox", 200, 200); imgFix("imgBox2", 300, 300); imgFix("imgBox3", 400, 400); }; </script> <style type="text/css"> * { margin:0; padding:0; } img{ border:none;} .imgBox li {list-style:none;width:200px;height:200px; background:#ccc; border:1px solid #666;text-align:center; margin-left:10px; padding:2px; margin-top:5px; overflow:hidden;} .imgBox img { max-width:200px max-height:200px;vertical-align:middle;} .imgBox2 li {list-style:none;width:300px;height:300px; background:#ccc; border:1px solid #666;text-align:center; margin-left:10px; padding:2px; margin-top:5px; } .imgBox2 img { max-width:300px; max-height:300px;vertical-align:middle;} .imgBox3 li {list-style:none;width:400px;height:400px; background:#ccc; border:1px solid #666;text-align:center; margin-left:10px; padding:2px; margin-top:5px; } .imgBox3 img { max-width:400px; max-height:400px;vertical-align:middle;} </style> </head> <body> <ul class="imgBox"> <li><a href="#"><img src="01.jpg" alt="img" /></a></li> <li><a href="#"><img src="03.jpg" alt="img" /></a></li> <li><a href="#"><img src="02.jpg" alt="img" /></a></li> </ul> <ul class="imgBox2"> <li><a href="#"><img src="01.jpg" alt="img" /></a></li> <li><a href="#"><img src="03.jpg" alt="img" /></a></li> <li><a href="#"><img src="02.jpg" alt="img" /></a></li> </ul> <ul class="imgBox3"> <li><a href="#"><img src="01.jpg" alt="img" /></a></li> <li><a href="#"><img src="111.jpg" alt="img" /></a></li> <li><a href="#"><img src="02.jpg" alt="img" /></a></li> </ul> </body> </html>