css+javascript 图片自动同比例缩小并且实现垂直居中
2007-11-01 15:14:28
图片自动等比例缩小，其实如果不考虑ie6的话，用css就可以实现，设定img的max-width和max-height，而<img>标签内不设定widht和height即可。 本文出自 51CTO.COM技术博客ie7已经支持max-width和max-height，这是为数不多的好消息之一。 但是对于ie6及以前的版本，就只能用js来设置了SCJD SCBCD Comptia A+ CCSP MCTS NCTS Tiffany Rings。 在 ff 2.0/ ie6 / ie7 中测试通过。 opera 8.5 cn 垂直居中未通过，正在研究[貌似opera下如果只有图片行高会失效……]。希望大家来测试。 Example Source Code <!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> <!--[if lte IE 6] HP0-922117-301 > <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.className.indexOf('imgBox') >= 0) { var imgElements = allElements.getElementsByTagName('img'); for (var j=0; j < imgElements.length; j++) 310-043 { if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction ) { HP0-273 if ( imgElements[j].width > imgElements[j].height) { imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width); imgElements[j].width = widthRestriction; } else { HP0-517 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"; } HP0-768 } /*for j*/ } }/*for i*/ } window.onload = imgFix; </script> <![endif]--> <style type="text/css"> <!-- * { margin:0; padding:0; } .imgBox li { list-style:none; width:200px; /* 宽度 */ height:200px; /* 高度 */ background:#ccc; border:1px solid #666; text-align:center; margin:5px; line-height:200px; 000-833 } .imgBox img { max-width:200px; /* 宽度 */ max-height:200px; /* 高度 */ vertical-align:middle;117-302 } --> </style> </head> <body> <ul class="imgBox"HP0-787> <li><img src="......" alt="img" /></li> <li><img src="......" alt="img" /></li> <li><img src="......" alt="img" /></li> <li><img src="......" alt="img" /></li> </ul> HP0-512 </body> |
mengla
博客统计信息
热门文章
最新评论
友情链接