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

时间：2021-05-18

解决图片长\宽大于容器,一边长一边宽，小于容器
在ff,ie里都通过
这里是js代码:
复制代码 代码如下:
<HTML>
<HEAD>
<TITLE>www.jb51.netNewDocument</TITLE>
<METANAME="Generator"CONTENT="EditPlus">
<METANAME="Author"CONTENT="">
<METANAME="Keywords"CONTENT="">
<METANAME="Description"CONTENT="">
<styletype="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:#f7f3d0url(../images/bg.jpg)repeat-xleft210px;}

#pic{border:1pxsolid#000;width:800px;height:auto!important;height:300px;min-height:300px;background:#fff}
#picdl{width:215px;height:200px;overflow:hidden;border:1pxsolid#000;margin:10px;float:left}
#picdt{height:161px;width:209px;overflow:hidden;border:1pxsolidred;text-align:center}

</style>
<scriptlanguage="javascript"src="tt.js"></script>
<scriptlanguage="javascript">
<!--
imgsrc={
vh:'161',//高
vw:'209',//宽

addEvent:function(elm,evType,fn,useCapture){
if(elm.addEventListener){
elm.addEventListener(evType,fn,useCapture);
returntrue;
}elseif(elm.attachEvent){
varr=elm.attachEvent('on'+evType,fn);
returnr;
}else{
elm['on'+evType]=fn;
}
},
init:function()
{
vardivn=document.getElementById("pic")
vardln=divn.getElementsByTagName("dl")
for(vari=0;i<dln.length;i++){
vardtn=dln[i].getElementsByTagName("dt");
varimgn=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)
{
varhh=(imgsrc.vh-imgn[0].height)/2
imgn[0].style.margin=hh+"0px0px0px"
}



}
}

}
imgsrc.addEvent(window,"load",imgsrc.init,false)
//-->
</script>

</HEAD>
<BODY>
<divid="pic">
<dl>
<dt><ahref="images/_1.jpg"title=""><imgsrc="images/_1.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_2.jpg"title=""><imgsrc="images/_2.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><ahref="images/_3.jpg"title=""><imgsrc="images/_3.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_4.jpg"title=""><imgsrc="images/_4.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_5.jpg"title=""><imgsrc="images/_5.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_6.jpg"title=""><imgsrc="images/_6.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_1.jpg"title=""><imgsrc="images/_1.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_2.jpg"title=""><imgsrc="images/_2.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_3.jpg"title=""><imgsrc="images/_3.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_4.jpg"title=""><imgsrc="images/_4.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_5.jpg"title=""><imgsrc="images/_5.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>

<dl>
<dt><ahref="images/_6.jpg"title=""><imgsrc="images/_6.jpg"border=0alt=""title=""></a></dt>
<dd>图片1</dd>
</dl>
<divclass="clear1"></div>
</div>



</BODY>
</HTML>


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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章