<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>
JQUERY 图片自适应宽高
最新推荐文章于 2020-05-15 10:12:46 发布
本文介绍如何利用JQUERY使图片根据浏览器窗口大小自动调整宽度,保持纵横比不变,适应各种屏幕尺寸。主要步骤包括设置图片的原始比例,然后在窗口resize事件中调整图片宽度,并计算对应的高度。
摘要由CSDN通过智能技术生成