关闭

限制图片宽度或高度

标签: javascriptxhtmlclassfunctionhtmldb2
787人阅读 评论(0) 收藏 举报
分类:

<!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=utf-8" />
<title>jquery限制图片宽度</title>
<script language="javascript" src="http://pay.fy5.com/statics/js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" >
$(function(){
        var imgs=$('.asds img');
        imgs.each(function(){
            if($(this).width() >370){
                $(this).width(370);
            }
        });
    });
</script>
</head>

<body>
<div class="asds"><a href="pic/0db2c9cab10b690bf31fe72b.jpg"><img src="pic/0db2c9cab10b690bf31fe72b.jpg" /></a></div>
</body>
</html>

 

1、css控制方法

结合css和其支持的expression实现的,示例代码如下:

<title>控制图片的最大高宽</title>
<style type="text/css">
.clear{clear:both;}
.widthimg{width: expression(this.width > 200 ? '200px': true); max-width: 200px; }
</style>

<body>
<div class="clear">
<img class="widthimg" src="../image/mm.jpg" />
</div>
<div class="clear">
<img src="../image/xx7.jpg" />
</div>
</body>

 

2、JS方法:

<img src="yukiiak.jpg"  onload="javascript:if(this.width>300)this.width=300">
 这句代码能把超过300宽度的图片变为300宽,  小于300的图片保持原尺寸不变。

 

 

<!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=utf-8" />
<title>限制图片尺寸的JS代码</title>
<script type="text/javascript">
function imgwh(){
    var img = document.getElementById("divheight");
    var imgkuandu=img.offsetHeight;
    var imgkuanduwidth=img.offsetWidth;
    if(imgkuandu>=500){
        document.getElementById("divheight").style.height="500px";
    }
    if(imgkuanduwidth>=600){
        document.getElementById("divheight").style.width="600px";
    }
}
</script>
</head>

<body>
<img src="01.jpg" onload="imgwh();" id="divheight" /><br />
限制了图片尺寸<br />
<img src="01.jpg" /><br />
没有限制的尺寸
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:735972次
    • 积分:10995
    • 等级:
    • 排名:第1501名
    • 原创:480篇
    • 转载:10篇
    • 译文:0篇
    • 评论:29条
    文章分类
    最新评论