JS+css 图片自动缩放自适应大小

我加了css的限制：


代码如下:

div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
　◎ width:600px; 在所有浏览器中图片的大小为600px;
　◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
　◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。
在放图片的页面里加了


代码如下:

<script language="JavaScript">
var imgObj;
for( i = 0; i < document . getElementsByTagName("img") . length; i++ )
{
 imgObj = document . getElementsByTagName("img")[i];
 //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放
 if ( imgObj . width > 500 ) //判断图片的宽度，如果大于700，则设置为700，值可以自己修改
 {
  imgObj . width = 500
 }
 if ( imgObj . height > 700 ) //判断图片的高度，如果大于700，则设置为700，值可以自己修改
 {
  imgObj . height = 700
 }
}
</script>

单独的图片控制，用这个：


代码如下:

<script>
var abc=document.getElementById("abc");
var imgs=abc.getElementsByTagName("img");
for (var i=0,g;g=imgs[i];i++)
g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}
</script>

测试在IE和FF下通过。

赞 (0)

相关推荐

  • js获取图片大小的函数代码

    1.获取图片大小的函数getImageSize 复制代码 代码如下: function getImageSize(imageEl) { var i = new Image(); //新建一个图片对象 i.src = imageEl.src; //将图片的src属性赋值给新建图片对象的src return new Array(i.width, i.height); //返回图片的长宽像素 //return [i.width, i.height]; } 2.示例 复制代码 代码如下: var img

  • JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应 复制代码 代码如下: <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> 复制代码 代码如下: function adapt(){ var tableWidth = $("#imgTable").width(); //表格宽度 var img = new Image(); img.src =$('#imgs

  • JS检测图片大小的实例

    复制代码 代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <input type="hidden" name="MAX_FILE_SIZE" id="MAX_FILE_SIZE" value="8000000" /> <input type="

  • 纯js实现div内图片自适应大小(已测试，兼容火狐)

    这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理.因为如果拉伸,图片可能就失真了. 废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8 以下是js代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> window.onload=fun

  • JS自动缩小超出大小的图片

    复制代码 代码如下: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic==null)loadpic="../img/lo

  • JavaScript限定图片显示大小的方法

    本文实例讲述了JavaScript限定图片显示大小的方法.分享给大家供大家参考.具体实现方法如下: /** * 限制图片显示的size. * * @param thisobj 图片组件 * @param limitW 限制宽度大小 * @param limitH 限制高度大小 */ function imageResize(thisobj, limitW, limitH) { var newW; var newH; if (thisobj.width > limitW) { newW = lim

  • js 加载时自动调整图片大小

    //  方法:setSelectReadOnly  用于设定极select控件ReadOnly, //        这个一个模拟只读不是真的只读 //        使用了onbeforeactivate,onfocus,onmouseover,onmouseout事件 //    示例:< img src='img.jpg' onload='ImgAutoSize(ImgD,FitWidth,FitHeight)' > ; //  create by sl  // ------------

  • css+js完美控制图片大小

    css+js完美控制图片大小

    使用js和css讲图片的现实控制在固定的区域内,大于这个区域的等比例缩放,小于这个区域的居中显示. css+js完美控制图片大小 0 && image.height>0){ flag=true; if(image.width/image.height>= 400/400){ if(image.width>400){ ImgD.width=400; ImgD.height=(image.height*400)/image.width; }else{ ImgD.width=i

  • JS实现控制图片显示大小的方法【图片等比例缩放功能】

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    本文实例讲述了JS实现控制图片显示大小的方法.分享给大家供大家参考,具体如下: <!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"> <hea

  • JavaScript 动态改变图片大小

    最近由于项目需要,在实现图片的时候,若图片大于100 X 100,则将其缩小为 100 X 100,若比这个小,则保持原图大小.经过研究发现,可以用Javascript代码简单实现. Javascript代码: 复制代码 代码如下: <script> function resizeImage(obj){if(obj.height>100)obj.height=100;if(obj.width>100)obj.width=100; } </script> 页面代码: 复制

随机推荐