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

2016-02-18 18:58 48 1 收藏

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

【 tulaoshi.com - Web开发 】

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

HTML
 HEAD
  TITLE 脚本之家 www.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://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160218/1584802.html

延伸阅读
标签: Web开发
这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢? !DOC...
标签: 电脑入门
PPT中文字的对齐 、图片的对齐,是做PPT最基本的要求了,也是PPT设计者最基本的能力。但你是不是还在用肉眼辨别PPT中文字或者图片是否对齐?是否还拿着尺子对着屏幕量对齐?不要再闹笑话了,专业PPT设计师都是用PowerPoint自带的工具对齐的。PPT图片或文字怎样对齐?下面一一来告诉你。 1.自定义工具栏横向或者纵向分布 对着快速访问栏(2007软...
标签: Web开发
有朋友使用DIV居中,但是却发现DIV居中失灵了,是怎么回事呢?下面给大家解决一下问题,呵呵! 1、一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 就可以了!其实其他...
标签: PHP
  <? $arr=getimagesize("images/album_01.gif"); echo $arr[3]; $strarr=explode(""",$arr[3]); echo $strarr[1]; ? <HTML <HEAD <TITLE演示图片等比例缩小<script function Wa_SetImgAutoSize(img) { //var img=document.all.img1;//获取图片 var MaxWidth=200;//设置图片宽度界限 v...
标签: Web开发
几个css元素的简单解释 div ul dl dt oldiv,这个很常见,块级元素,div尽量少用,和table一样,嵌套越少越好 ol 有序列表。 ol li……/li li……/li li……/li /ol 表现为: 1…… 2…… 3…… ul 无序列表,表现为li前面是大圆点而不是123 ul li……/li li……/li /ul 很多人容易忽略 dl dt dd的用法 dl 内容块 dt 内容块...

经验教程

259

收藏

86
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部