js+CSS 图片等比缩小并垂直居中实现代码


Posted in Javascript onDecember 01, 2008
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>图片自动等比例缩小且垂直居中-3water.com </title> 
<!--[if lte IE 6]> 
<script type="text/javascript" language="javascript"> 
function imgFix() { 
//定义要限制的图片宽高,这个宽高要同style里面定义的相同,小于限定高宽的图片不操作 
var widthRestriction = 200; 
var heightRestriction = 200; 
var allElements = document.getElementsByTagName('*') 
for (var i = 0; i < allElements.length; i++) 
{ 
if (allElements[i].className.indexOf('imgBox') >= 0) 
{ 
var imgElements = allElements[i].getElementsByTagName('img'); 
for (var j=0; j < imgElements.length; j++) 
{ 
if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction ) 
{ 
if ( imgElements[j].width > imgElements[j].height) 
{ 
imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width); 
imgElements[j].width = widthRestriction; 
} else 
{ 
imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height); 
imgElements[j].height = heightRestriction; 
} 
} 
if ( imgElements[j].height < heightRestriction ) 
{ 
imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px"; 
} 
} /*for j*/ 
} 
}/*for i*/ 
} 
window.onload = imgFix; 
</script> 
<![endif]--> 
<style type="text/css"> 
<!-- 
* { 
margin:0; 
padding:0; 
} 
.imgBox li { 
list-style:none; 
width:200px; /* 宽度 */ 
height:200px; /* 高度 */ 
background:#ccc; 
border:1px solid #666; 
text-align:center; 
margin:5px; 
line-height:200px; 
} 
.imgBox img { 
max-width:200px; /* 宽度 */ 
max-height:200px; /* 高度 */ 
vertical-align:middle; 
} 
--> 
</style> 
</head> 
<body> 
<ul class="imgBox"> 
<li><img src="......" alt="img" /></li> 
<li><img src="......" alt="img" /></li> 
<li><img src="......" alt="img" /></li> 
<li><img src="......" alt="img" /></li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
javascript实现的网页局布刷新效果
Dec 01 #Javascript
js 页面输出值
Nov 30 #Javascript
Js callBack 返回前一页的js方法
Nov 30 #Javascript
javascript 动态添加事件代码
Nov 30 #Javascript
JS 自动安装exe程序
Nov 30 #Javascript
javascript 尚未实现错误解决办法
Nov 27 #Javascript
Javascript 构造函数 实例分析
Nov 26 #Javascript
You might like
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
php实现短信发送代码
2015/07/05 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
pyramid配置session的方法教程
2013/11/27 Python
python复制与引用用法分析
2015/04/08 Python
python opencv之分水岭算法示例
2018/02/24 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python测试模块doctest使用解析
2019/08/10 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
用python发送微信消息
2020/12/21 Python
eBay德国站:eBay.de
2017/09/14 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
Java面试笔试题大全
2016/11/23 面试题
2016入党培训心得体会范文
2016/01/08 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
Python编解码问题及文本文件处理方法详解
2021/06/20 Python