当前位置: 代码迷 >> Web前端 >> jquery整合图片大小
  详细解决方案

jquery整合图片大小

热度:50   发布时间:2012-09-24 13:49:41.0
jquery调整图片大小
	//如果图片超过了div设定宽高,就调整图片大小
	$(document).ready(function() {
        initImageSize("picDiv",240,160);
	});

        //idName为图片img所在的父节点的ID
        //maxWidth最大宽度,maxHeight最大高度 
	function initImageSize(idName,maxWidth,maxHeight){
		    $('#'+idName+' img').each(function() {
	    var maxWidth = maxWidth; // 图片最大宽度
	    var maxHeight = maxHeight;    // 图片最大高度
	    var ratio = 0;  // 缩放比例
	    var width = $(this).width();    // 图片实际宽度
	    var height = $(this).height();  // 图片实际高度
	    // 检查图片是否超宽
	    if(width > maxWidth){
	        ratio = maxWidth / width;   // 计算缩放比例
	        width=maxWidth;
	        $(this).css("width", maxWidth); // 设定实际显示宽度
	        height = height * ratio;    // 计算等比例缩放后的高度 
	        $(this).css("height", height);  // 设定等比例缩放后的高度
	    }
	    // 检查图片是否超高
	    if(height > maxHeight){
	        ratio = maxHeight / height; // 计算缩放比例
	        height=maxHeight;
	        $(this).css("height", maxHeight);   // 设定实际显示高度
	        width = width * ratio;    // 计算等比例缩放后的高度
	        $(this).css("width", width);    // 设定等比例缩放后的高度
	    }
	});
	}
  相关解决方案