jquery操作html中图片宽高自适应

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在网站制作中如果后台上传的图片不做宽高限制，在前台显示的时候，经常会出现图片变形，实用下面方法可以让图片根据宽高自适应，不论是长图片或者高图片都可以完美显示。

$("#myTab0_Content0 img").each(function(i){
var img = $(this);
var realWidth;//真实的宽度
var realHeight;//真实的高度
//这里做下说明，$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象！
$("<img/>").attr("src", $(img).attr("src")).load(function() {

// 后台上传图片的真实宽高（像素）
realWidth = this.width;
realHeight = this.height;
//alert(realWidth)
//alert(realHeight)
// 样式定义的li的宽
var imgWcss = $('.mp5List li').width();
//alert(imgWcss);
// 标准的图片比例
var imgBz = 294/220;

// li高
var h = imgWcss/imgBz;
$('.mp5List li').css('height',h+'px');


//图片太高，高自动，宽固定
if( realWidth < realHeight){
$(img).css({'width':imgWcss+ 'px','height':'auto' });
// alert(imgWcss)
//alert(1);

}
//图片太宽，宽自动，高固定
if( realWidth > realHeight){
$(img).css({'height':h+'px', 'width':'auto' });


}
})
})