限制图片宽度或高度

原创 2012年03月26日 08:59:48

<!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>

相关文章推荐

判知图片的大小(宽度与高度)

  • 2012年01月15日 14:53
  • 22KB
  • 下载

MFC 实现对显示的界面(最小宽度和最小高度的限制)

MFC窗口 对拖动的最小范围的限制 第一步:在类向导中,对WM_GETMINMAXINFO消息进行映射 1)如果是单文档视图结构,在CMainFrame类中派生该消息,生成相应的响应函数 2)如果是对...
  • dhl11
  • dhl11
  • 2017年06月02日 11:56
  • 195

【框架MFC】限制单文档和多文档窗口范围最小值(设置窗口宽度和高度的下限)

原理 在CWnd类的“CreateEx”函数中使用了“::AfxCtxCreateWindowEx”来设置窗口的属性,在调用“::AfxCtxCreateWindowEx”函数之前,调用了PreCre...

swift2.0 cell在一定宽度限制下的高度自适应

效果图: 高度自适应网上有很多,但是我遇到的是宽度有限制的高度自适应,所以准备记录一下这个搞了一天多的适应方法……直接上代码 首先是在tableview的界面控制器中添加上这两个cell高度计算函...

以最省内存的方式把大图片加载到内存及获取Exif信息和获取屏幕高度和宽度的新方法

我们在加载图片时经常会遇到内存溢出的问题,图片太大,我们加载图片时,一般都是用的如下一般方法(加载本地图片): /** * 不作处理,去加载图片的方法,碰到比较大的图片会内存溢出 */ pr...

div或img图片高度随宽度自适应

一、可以利用js判断图片的宽度从而实现自适应。 二、只利用css来实现图片高度的自适应问题。...
  • zh_rey
  • zh_rey
  • 2017年04月08日 11:39
  • 9819

iOS Label自适应高度/宽度 , 图片自适应

项目里许多地方都需要自适应Label上文字的高度,所以可以吧自适应高度的代码单独封装起来,写在一个类里,这样在其他的类里想调用这个方法,就可以直接使用,不用每个类都写一遍这个方法.我把这个类起个名字叫...

IOS修改图片的像素(高度和宽度)

假如我们在用UITabBarController的时候,quan'ha

一图片压缩的java类,大小变小,宽度高度不变

public static byte[] convertImage2Type(String imageFile, String imageType)             throws Excep...

图片宽度全屏显示 高度按比例显示()

下面是网上的方法(但不能完全实现,往下是解决方案): Android自身不能实现这样的效果 ImageView 中有个 scaleType 属性,设置图片在 view 中的缩放方式,本来以为 fit...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:限制图片宽度或高度
举报原因:
原因补充:

(最多只允许输入30个字)