用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 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
jQuery select控制插件
Aug 17 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
javascript实现简单搜索功能
Mar 26 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 and xml示例
2006/11/22 PHP
php实现简单爬虫的开发
2016/03/28 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
JS严格模式知识点总结
2018/02/27 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
python+opencv实现动态物体追踪
2018/01/09 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
如何基于Python实现数字类型转换
2020/02/07 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
八项规定整改方案
2014/10/01 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python