繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js+CSS 图片等比缩小并垂直居中实现代码
- Javascript
- javascript中的有名函数和无名函数
- javascript[js]获取url参数的代码
- javascript select 之间传值效果的代码
- js正则实现的密码框简单制作,还可以替换成自己想用得符号
- 脚本控制自适应高度的缩短问题
- 兼容ie和firefox版本的js反选 全选 多选框
- javascript 随机数 与高级应用 附vbscript(asp) 随机数总结
- 不用确认即可打印的javascript代码
- 推荐自用 Javascript 缩图函数 (onDOMLoaded)……
- 用javascript实现div可编辑的常见方法
- 用JavaScript实现的一个IP地址输入框
- 用javascript取得传递参数的个数的代码
- 当鼠标移出灰色区域时候,菜单项怎么隐藏起来
- 才发现的超链接js导致网页中GIF动画停止的解决方法
- javascript window.onerror事件学习新收获
- javascript 如何生成不重复的随机数
- 超个性的导航效果
- 不能再简单的无闪刷新验证码原理很简单
- 经常用到的javascript验证函数收集
- 用js实现手把手教你月入万刀(转贴)
Javascript 中的 js+CSS 图片等比缩小并垂直居中实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 353 ::
收藏到网摘: n/a
本例子在在 ff 2.0/ ie6 / ie7 中测试通过。但在 opera 8.5 cn中没有通过。希望大家测试。
复制代码 代码如下:
<!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>图片自动等比例缩小且垂直居中-www.ruanchen.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>
评论 (0) All
