您的位置：首页 > Web前端 > JavaScript

javascript控制图片自适应容器大小

2011-07-03 23:57 459 查看
在网页中往往会在某些容器(DIV)中放置一些图片，但是我们在设计网页的时候一定要控制好图片的大小，不然图片太大就会把页面撑的非常难看。
下面给出用JavaScript实现图片缩放效果代码，可以随意控制图片的输出大小。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片自适应容器大小 零度综合信息发布系统 LdCMS!NT</title>

<script type="text/javascript">
/*
*
* 功能：图片自适应容器大小
* 说明：本功能可以实现图片自适应图片容器(可有可无)的大小，
*       并居中于容器中央
* 使用：<img src="http://bbs.0duinfo.com/upload/2011/02/12/34/2473323406406.jpg"
*                                    |                             />
*                                    ↓                                                      ↓          ↓          ↓
* 参数：                    图片路径                                   要设置的对象 容器宽度 容器高度
* 作者：[关中游侠]
* 日期：2009-4-7
* 来自：http://www.0duinfo.com
*
*/
function SetImg(obj,maxW,maxH)
{
var imgH=obj.height;
var imgW=obj.width;

if(obj.height>maxH)
{
obj.height=maxH;
obj.widht=(obj.width*(maxH/imgH));
imgH=maxH;
imgW=obj.width;
}

if(obj.width>maxW)
{
obj.width=maxW;
obj.height=(maxW/imgW)*imgH;
imgW=maxW;
imgH=obj.height;
}

obj.style.marginTop=(maxH-obj.height)/2;
obj.style.marginLeft=(maxW-obj.width)/2;
}
</script>

</head>
<body>
<!--图片容器开始 为了方便查看效果 故将容器背景设置为红色 注：此容器可以没有-->
<div style="height:400px;width:400px;background-color:Red;">
<img src="http://bbs.0duinfo.com/upload/2011/02/12/34/2473323406406.jpg" alt="" />
</div>
<!--图片容器结束-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航