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 相关文章推荐
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
Vue中的字符串模板的使用
May 17 Javascript
js的对象与函数详解
Jan 21 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
js实现搜索提示框效果
Sep 05 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
简单的PHP图片上传程序
2008/03/27 PHP
PHP 采集心得技巧
2009/05/15 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
vue实现弹幕功能
2019/10/25 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python求素数示例分享
2014/02/16 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
财务经理岗位职责
2013/11/09 职场文书
syb养殖创业计划书
2014/01/09 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
同事去世追悼词
2015/06/23 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
Python基础知识之变量的详解
2021/04/14 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS