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

所属分类: 网络编程 / JavaScript 阅读数: 1027
收藏 0 赞 0 分享
解决图片长\宽大于容器,一边长一边宽,小于容器
在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文件放上来,自己放图片看看就行了

更多精彩内容其他人还在看

layui table 复选框跳页后再回来保持原来选中的状态示例

今天小编就为大家分享一篇layui table 复选框跳页后再回来保持原来选中的状态示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue-Cli项目优化操作的实现

这篇文章主要介绍了Vue-Cli项目优化操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

这篇文章主要介绍了解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题,本文给大家总结的非常详细,需要的朋友可以参考下
收藏 0 赞 0 分享

vue 父组件通过v-model接收子组件的值的代码

这篇文章主要介绍了vue 父组件通过v-model接收子组件的值的代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue 全局环境切换问题

小编在开发使经常会碰到全局切换问题,今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

element-ui 本地化使用教程详解

这篇文章主要介绍了element-ui 本地化使用教程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

在Vue项目中,防止页面被缩放和放大示例

今天小编就为大家分享一篇在Vue项目中,防止页面被缩放和放大示例,具有很好的参考 价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue h5移动端禁止缩放代码

今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue 3.0双向绑定原理的实现方法

这篇文章主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

nest.js 使用express需要提供多个静态目录的操作方法

这篇文章主要介绍了nest.js 使用express需要提供多个静态目录的操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多