jQuery插件——图片按比例自适应缩放

我只是参照 @sofish 的 关于图片按比例自适应缩放 一文中的 代码 与 原理 写成了 这个 jQuery插件，木有神马技术含量的说、

插件代码如下：

/**
* 图片按比例自适应缩放
* @param maxWidth {Number} 预览区域的最大宽度
* @param maxHeight {Number} 预览区域的最大高度
*/

$.fn.resizeImg = function(maxWidth, maxHeight) {
var w = $.width,
h = $.height;

// 当图片比预览区域小时不做任何改变
if (w < maxWidth && h < maxHeight) return;

// 当实际图片比例大于预览区域宽高比例时
// 缩放图片宽度，反之缩放图片宽度
w/h > maxWidth/maxHeight  ? $.width = maxWidth : $.height = maxHeight;
}

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: <![ jQuery插件——图片按比例自适应缩放 ]]>

 

=.= 这代码基本是 直接 Copy @sofish 的、、掩面～

说一下 如何调用吧、、就按照下面写的代码调用吧，别忘了要先载入 jQuery库、

// 对 class="post-content" 下的所有 img 元素，进行 最大宽度为 500，最大高度为 700 的 自适应按比例缩放、（关键是 缩放、恩！
$('.post-content img').resizeImg(500, 700);

最后，为了让这函数能够在网页文档加载好（忽视图片的加载、、）的时候，立马执行，还必须加上 $(document).ready 这个预载代码、

所以，完整的代码如下所示：

$(document).ready(function(){ //获取文档对象就绪的时候，不需要等待图片等下载完成

/**
* 图片按比例自适应缩放
* @param maxWidth {Number} 预览区域的最大宽度
* @param maxHeight {Number} 预览区域的最大高度
*/
$.fn.resizeImg = function(maxWidth, maxHeight) {
var w = $.width,
h = $.height;

// 当图片比预览区域小时不做任何改变
if (w < maxWidth && h < maxHeight) return;

// 当实际图片比例大于预览区域宽高比例时
// 缩放图片宽度，反之缩放图片宽度
w/h > maxWidth/maxHeight  ? $.width = maxWidth : $.height = maxHeight;
}

$('.post-content img').resizeImg(500, 700);
})

2011/02/19 更新（感谢 @sofish 提醒），使用了 each()，并且重新写了判断条件、

P.S. 调用方法不变、

$.fn.resizeImg = function(maxWidth, maxHeight) {
// 采取 each() 对单个对象分别进行缩放
$(this).each(function() {
var w = $(this).width(),
h = $(this).height();

// 当图片比预览区域小时不做任何改变
if (w < maxWidth && h < maxHeight) {
return;
} else if (w/h > maxWidth/maxHeight) { // 当实际图片比例大于预览区域宽高比例时

// 缩放图片宽度
$(this).width(maxWidth);
$(this).height((maxWidth*h)/w);
} else {

// 反之缩放图片宽度
$(this).height(maxHeight);
$(this).width((maxHeight*w)/h);
}
})
}

2011/02/21 更新 （感谢 @leeiio），采用 return this.each(function(){.....}); 形式、

P.S. 调用方法依旧不变、、

$.fn.resizeImg = function(maxWidth, maxHeight) {
return this.each(function() {
var w = $(this).width(),
h = $(this).height();
if (w < maxWidth && h < maxHeight) {
return;
} else if (w/h > maxWidth/maxHeight) {
$(this).width(maxWidth);
$(this).height((maxWidth*h)/w);
} else {
$(this).height(maxHeight);
$(this).width((maxHeight*w)/h);
}
});
};