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

19941205a4

19941205a4

2016-02-18 18:58

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享用js 让图片在 div或dl里 居中底部对齐的教程,热爱PS的朋友们快点看过来吧!

解决图片长宽大于容器,一边长一边宽,小于容器
在ff,ie里都通过
这里是js代码:
代码如下:

HTML
 HEAD
  TITLE 脚本之家 m.tulaoshi.com 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;idln.length ;i++) {
       var dtn=dln[i].getElementsByTagName("dt");
       var imgn=dtn[0].getElementsByTagName("img");

      
      if(imgn[0].heightimgsrc.vh||imgn[0].widthimgsrc.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].height0)
      {
      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
dta href="images/_1.jpg" title=""img src="images/_1.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta href="images/_2.jpg" title=""img src="images/_2.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl
dl
dta href="images/_3.jpg" title=""img src="images/_3.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta href="images/_4.jpg" title=""img src="images/_4.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta href="images/_5.jpg" title=""img src="images/_5.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta href="images/_6.jpg" title=""img src="images/_6.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta href="images/_1.jpg" title=""img src="images/_1.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta href="images/_2.jpg" title=""img src="images/_2.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta href="images/_3.jpg" title=""img src="images/_3.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta href="images/_4.jpg" title=""img src="images/_4.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta href="images/_5.jpg" title=""img src="images/_5.jpg" border=0 alt="" title=""/a/dt
dd图片1/dd
/dl

dl
dta 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文件放上来,自己放图片看看就行了

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

DIV实现垂直居中对齐的方法

Web开发
DIV实现垂直居中对齐的方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用CSS让文字居于DIV的底部

Web开发
用CSS让文字居于DIV的底部

CSS让图片垂直居中和底端对齐的代码

Web开发
CSS让图片垂直居中和底端对齐的代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

想让DIV居中 如何编写CSS

Web开发
想让DIV居中 如何编写CSS

Div上下居中

Web开发
Div上下居中

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript 数组的 uniq 方法

JavaScript 数组的 uniq 方法

JavaScript中的事件处理

JavaScript中的事件处理
下拉加载更多内容 ↓