img图片等比压缩教程

img图片等比压缩

 1.图片的宽高处理(法一将图片等比压缩，然后居中显示，图片的容器的宽高固定)

$(function(){
	autosize($(".navdetail_l_pic-img"),458,442);
})

function autosize(img, maxwidth, maxheight) {
	var image = new image(); 
	image.src = img.attr("src");  
	
	console.log(img.attr("src"),"w"+image.width,"h"+image.height);
	
	if(image.width < maxwidth && image.height < maxheight) {
		img.width = image.width;
		img.height = image.height;
		
		$(".navdetail_l_pic-img").css({"width":img.width,"margin-left":"-"+img.width/2+"px"});
		$(".navdetail_l_pic-img").css({"height":img.height,"margin-top":"-"+img.height/2+"px"});
		
		
	} else {
		if(maxwidth / maxheight <= image.width / image.height){
			img.width = maxwidth; 
			img.height = maxwidth * (image.height / image.width);
			
			$(".navdetail_l_pic-img").css({"width":img.width,"margin-left":"-"+img.width/2+"px"});
			$(".navdetail_l_pic-img").css({"height":img.height,"margin-top":"-"+img.height/2+"px"});
			
		} else { 
			img.width = maxheight * (image.width / image.height);
			img.height = maxheight; 
			$(".navdetail_l_pic-img").css({"width":img.width,"margin-left":"-"+img.width/2+"px"});
			$(".navdetail_l_pic-img").css({"height":img.height,"margin-top":"-"+img.height/2+"px"});
		}
	}
	
	$(".navdetail_l_pic-img").css({"display":"block"});

}

2.大图自适应（法二高度等于屏幕高度，宽度自适应，同时居中显示）

var imgh = $(window).height()
var imgobg = $('.bigpicmask-wrap')
imgobg.css({'height':imgh,'top':0,'margin-top':0,'width':'auto'})
var imgw = imgobg.width()
imgobg.css('margin-left','-'+imgw/2+'px')