dedeCMS图片自动等比例缩小且垂直居中方法
2010-07-27 09:58:00 来源:WEB开发网核心提示:图片自动等比例缩小且垂直居中 代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
图片自动等比例缩小且垂直居中 代码:
<!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]--> <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) //获取class名称 { 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; } .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="......" alt="img" /></li> <li><img src="......" alt="img" /></li> <li><img src="......" alt="img" /></li> <li><img src="......" alt="img" /></li> </ul> </body> </html>
[]
- ››DeDeCMS的archives表出错问题解决
- ››dedecms5.6内容页面调用当前文章的相关文章解决办...
- ››dedecms删除文章的同时自动删除生成的html文件
- ››DEDECMS时间自定义显示方法
- ››DedeCms模板安装以及制作概述
- ››DedeCMS 5.6 整合 Discuz7.2(通过UCenter 1.5.1)
- ››图片格式无阻碍 美图看看无忧看图
- ››dedecms解决js广告更新速度慢的方法
- ››dedecms5.6 广告代码添加大全
- ››DEDECMS5.6文章页加边框的方法
- ››dedeCMS图片自动等比例缩小且垂直居中方法
- ››DEDECMS列表调用好评差评中立
更多精彩
赞助商链接