管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　解决图片长\宽大于容器,一边长一边宽，小于容器

　　在ff,ie里都通过

　　这里是js代码:

复制代码代码如下:

　　<HTML>

　　<HEAD>

　　<TITLE> 管理资源吧 www.glzy8.com New Document </TITLE>

　　*{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>

<!--

　　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>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　<dl>

　　</dl>

　　</div>

　　</BODY>

　　</HTML>

　　包太大上传不了，我把html文件放上来，自己放图片看看就行了

教程首页更多教程

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

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