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' });


}
})
})

posted @ 2019-04-04 10:35  咫尺灵犀  阅读(1747)  评论(0编辑  收藏  举报