用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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
PHP上传图片类显示缩略图功能
2016/06/30 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
异步加载script的代码
2011/01/12 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
入党自我鉴定范文
2013/10/04 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
旅游市场营销方案
2014/03/09 职场文书
工程承诺书怎么写
2014/05/24 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
爱晚亭导游词
2015/02/09 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书