`
xixian
  • 浏览: 210600 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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);    // 设定等比例缩放后的高度
	    }
	});
	}
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics