JQUERY 图片自适应宽高

最新推荐文章于 2020-05-15 10:12:46 发布

啵呗

最新推荐文章于 2020-05-15 10:12:46 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏：个人心得文章标签： jquery function image html class div

本文链接：https://blog.youkuaiyun.com/bobay/article/details/7612484

个人心得专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何利用JQUERY使图片根据浏览器窗口大小自动调整宽度，保持纵横比不变，适应各种屏幕尺寸。主要步骤包括设置图片的原始比例，然后在窗口resize事件中调整图片宽度，并计算对应的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1、自适应宽：

<div class="prolistshowimg">
<a href="#">
<img src="abc.jpg" />
</a>
</div>

2、自适应宽高：

<img src="abc.jpg" class="proListShow" />