限制图片宽度或高度

原创 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>

网页中限制图片的最大宽度和高度

      img.pic{     max-width:300;    max-height:100px;    /*由于IE6.0以及以前版本的IE不支持上边两个属性,所以加上以下两条语句.这里要...
  • tan_jianhui
  • tan_jianhui
  • 2007年06月01日 12:28
  • 1825

HTML限定图像最大尺寸并保持原有比例

     限定图像的最大尺寸,可以在的onload属性中设置图像的宽度和高度,如果还要保持图像的比例的话,那就只需要设定其中一个属性就行了。这里以上传图片为例,代码如下所示:img id="show"...
  • linyiteng1220
  • linyiteng1220
  • 2008年11月05日 15:47
  • 7053

控制图片宽度或者高度且使图片不失真

我们常常在做需要放很多图片的网站时,需要给图片定义一个固定的样式,这样也是为了页面的美观,如果要将图片的高度和宽度定义为固定的值,那没有办法。然后就会失真现在当我们要做一个类似于瀑布流的页面时,并且又...
  • moby1994
  • moby1994
  • 2015年11月01日 12:10
  • 244

jquery根据图片宽度同比例设置图片高度,图片自适应高度

用jq根据图片的宽度同比例设置图片高度,有时图片宽度好控制,但高度一般都是auto,如果为了自适应,不方便直接设置图片的高度heght,可以用下载的方法 $(function...
  • viqecel
  • viqecel
  • 2016年10月21日 11:33
  • 2794

获取屏幕的宽度以及动态设置ImageView的宽度、高度

当在使用一个ImageView的时候,有时候需要将它的宽度、gaodu
  • u012336923
  • u012336923
  • 2014年10月04日 15:57
  • 2426

iOS 图片宽固定 高度保持比例

sd_webImage 请求数据, a是全局变量,self.imageHeight.constant 是 NSLayoutConstraint 拖的线,但是不知道什么原因导致  [self.super...
  • u014600626
  • u014600626
  • 2016年05月12日 17:07
  • 2056

jquery 限制图片最大宽度

$('img').each(function () {             $(this)[0].onload = function () {                 var ...
  • a497785609
  • a497785609
  • 2017年02月15日 10:19
  • 290

获取浏览器的高度、宽度以及监控浏览器窗口的变化

获取浏览器的高度和宽度 var width=document.documentElement.clientWidth; var height=d...
  • yibanbairimeng
  • yibanbairimeng
  • 2017年01月18日 11:07
  • 459

解决图片太大溢出问题、CSS 限制图片最大宽度、图片按比例自动缩放

在网上找了很久,这里保存一下,方便以后使用   实现思路很简单,改造js代码,既然图片很大,那么我们先用最经典的限制width的方法限制大图的宽度,但是小图怎么办?小图我们用onload的方法再缩...
  • u014413032
  • u014413032
  • 2015年01月01日 16:31
  • 570

20.当图片有宽度的时候,图片的高度会随着宽度成比例缩放!

当图片有宽度的时候,图片的高度会随着宽度成比例缩放!          Document                   html,body {             height:100...
  • hh279768876
  • hh279768876
  • 2016年07月21日 20:04
  • 182
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:限制图片宽度或高度
举报原因:
原因补充:

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