未经特别修饰的图片一般来说在尺寸未必是恰到好处的,比如图片尺寸过大就可能导致布局结构被撑开,下面是一段代码实例,能够实现如果图片的尺寸没有超过限制,则保持原样,如果超过就需要自适应。

代码实例如下:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="https://www.51qianduan.com/" />
<title>图片大小自适应-51前端</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script language="javascript">
$.each($("#content img"),function(){
var image=new Image();
image.src=$(this).attr('src');
if(image.width>0&&image.height>0){  
  if(image.width>=600){
   $(this).attr('width',600);
   $(this).attr('height',(image.height*600)/image.width);
  }
}
});
</script>
</head> 
<body> 
<div id="content"> 
<img id="img" src="mytest/jQuery/big.jpg" alt="51前端">
</div> 
</body> 
</html>

代码描述:jQuery图片尺寸大小 自适应。jQuery图片尺寸大小自适应源码实例



109 145



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到