用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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
慎用 somefunction.prototype 分析
Jun 02 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
微信小程序实现弹框效果
May 26 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
python网络编程学习笔记(四):域名系统
2014/06/09 Python
深入学习python的yield和generator
2016/03/10 Python
python实现批量监控网站
2016/09/09 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python的debug实用工具 pdb详解
2019/07/12 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Python try except else使用详解
2021/01/12 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
小学教师培训感言
2014/02/11 职场文书
亲子读书活动方案
2014/02/22 职场文书
移交协议书
2014/08/19 职场文书
承租经营合作者协议书
2014/10/01 职场文书
小学班主任工作随笔
2015/08/15 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android