作家
登录

用js 让图片在 div或dl里 居中,底部对齐

作者: 来源:www.28hudong.com 2013-03-30 03:11:04 阅读 我要评论

解决图片长宽大于容器,一边长一边宽,小于容器 在ff,ie里都通过这里是js代码: 复制代码 代码如下:<HTML> <HEAD> <TITLE> 脚本之家 www.jb51.net New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> *{margin:0px; padding:0px; font-size:12px; } body{ font-size:0.8em; color: #333;} ul{ list-style:none} .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} img{border:0px;} .clear1{ clear: both; width: 100%; height: 1px; overflow: hidden;} a{ text-decoration: none; color:#404040 } body{ background:#f7f3d0 url(../images/bg.jpg) repeat-x left 210px;} /**/ #pic{border:1px solid #000; width:800px; height:auto!important;height:300px; min-height:300px;background:#fff} #pic dl{width:215px;height:200px; overflow: hidden;border:1px solid #000;margin:10px;float:left} #pic dt{height:161px; width:209px;overflow:hidden;border:1px solid red;text-align:center} </style> <script language="javascript" src="tt.js"></script> <script language="javascript"> <!-- imgsrc={ vh:'161', //高 vw:'209', //宽 addEvent: function(elm, evType, fn, useCapture){ if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } }, init:function() { var divn=document.getElementById("pic") var dln=divn.getElementsByTagName("dl") for (var i=0;i<dln.length ;i++) { var dtn=dln[i].getElementsByTagName("dt"); var imgn=dtn[0].getElementsByTagName("img"); if(imgn[0].height>imgsrc.vh||imgn[0].width>imgsrc.vw) { if(imgn[0].height/imgsrc.vh > imgn[0].width/imgsrc.vw) { imgn[0].heigh=imgsrc.vh imgn[0].width=imgsrc.vh/imgn[0].height*imgn[0].width } else { imgn[0].width=imgsrc.vw imgn[0].heigh=imgsrc.vw/imgn[0].width*imgn[0].heigh } } if(imgsrc.vh-imgn[0].height>0) { var hh=(imgsrc.vh-imgn[0].height)/2 imgn[0].style.margin=hh+" 0px 0px 0px" } } } } imgsrc.addEvent(window,"load",imgsrc.init,false) //--> </script> </HEAD> <BODY> <div id="pic"> <dl> <dt><a href="images/_1.jpg" title=""><img src="images/_1.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_2.jpg" title=""><img src="images/_2.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_3.jpg" title=""><img src="images/_3.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_4.jpg" title=""><img src="images/_4.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_5.jpg" title=""><img src="images/_5.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_6.jpg" title=""><img src="images/_6.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_1.jpg" title=""><img src="images/_1.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_2.jpg" title=""><img src="images/_2.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_3.jpg" title=""><img src="images/_3.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_4.jpg" title=""><img src="images/_4.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_5.jpg" title=""><img src="images/_5.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <dl> <dt><a href="images/_6.jpg" title=""><img src="images/_6.jpg" border=0 alt="" title=""></a></dt> <dd>图片1</dd> </dl> <div class="clear1"></div> </div> </BODY> </HTML> 包太大上传不了,我把html文件放上来,自己放图片看看就行了

  推荐阅读

  JavaScript中的Location地址对象

location 地址对象 它描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址,只需要使用“location”就行了;若要表示某一个窗口的地址,就使用“<窗口对象>.location”。先前写了一片用window.location.hre>>>详细阅读


本文标题:用js 让图片在 div或dl里 居中,底部对齐

地址:http://www.17bianji.com/kaifa2/JS/29876.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)