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


Posted in Javascript onJanuary 21, 2008

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

<HTML> 
 <HEAD> 
  <TITLE> 三水点靠木 3water.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;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文件放上来,自己放图片看看就行了
Javascript 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
vue模板语法-插值详解
Mar 06 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
react 生命周期实例分析
May 18 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
vue实现下拉菜单树
Oct 22 Javascript
jquery 插件 人性化的消息显示
Jan 21 #Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 #Javascript
利用js跨页面保存变量做菜单的方法
Jan 17 #Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 #Javascript
JavaScript表单常用验证集合
Jan 16 #Javascript
JavaScript的Cookies
Jan 16 #Javascript
JavaScript中的对象化编程
Jan 16 #Javascript
You might like
php5与php7的区别点总结
2019/10/11 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
全面了解js中的script标签
2016/07/04 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
对python判断是否回文数的实例详解
2019/02/08 Python
基于Python函数和变量名解析
2019/07/19 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python 下划线的不同用法
2020/10/24 Python
竞选副班长演讲稿
2014/04/24 职场文书
大学班级文化建设方案
2014/05/06 职场文书
治安消防安全责任书
2014/07/23 职场文书
音乐课外活动总结
2015/05/09 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
pytorch 实现变分自动编码器的操作
2021/05/24 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python