JQUERY 图片自适应宽高

本文介绍如何利用JQUERY使图片根据浏览器窗口大小自动调整宽度,保持纵横比不变,适应各种屏幕尺寸。主要步骤包括设置图片的原始比例,然后在窗口resize事件中调整图片宽度,并计算对应的高度。
摘要由CSDN通过智能技术生成
<script type="text/javascript"> 
//自动适应宽,原版 
$(function(){ 
var maxwidth = 310; 
var html = ''; 
$('.prolistshowimg a img').html(html); 
$(".prolistshowimg a img").each(function(i){  
var proImg = new Image(); 
var image = $(this); 
//alert(this.src); 
proImg.onload = function(){ 
if(proImg.width > maxwidth ){image.width(maxwidth);}	  
} 
proImg.src = this.src;	  
}); 
}); 

//自动适就宽高,改动 
$(function(){ 
var max_w=172; 
var max_h=113; 
var m1=max_w/max_h; 
var html = ''; 
$(".proListShow").html(html); 
$(".proListShow").each(function(i){ 
var proImg = new Image(); 
var image = $(this); 
//alert(this.src); 
proImg.onload = function(){ 
var m2 = proImg.width/proImg.height; 
if(m2 > m1){ 
image.width(max_w); 
}else{ 
image.height(max_h); 
} 
} 
proImg.src = this.src;	  
}); 
});
</script> 
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

啵呗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值