jQuery Mu Image Resize
Mu Image Resize 是一個用來作前端縮圖的jQuery Plugin,只要給定圖片的class名稱及你期望它縮小的寬、高即可自動依比例縮圖並裁切。
Mu Image Resize is a jQuery plugin to automatically resize & crop images with specific class names.
Author:
Audi Lu / mrmu studio
Usage & Demo:
$(function(){
$('.size-A').muImageResize({width: 150, height:200});
$('.size-B').muImageResize({width: 150, height:80});
});
$('.size-A').muImageResize({width: 150, height:200});
$('.size-B').muImageResize({width: 150, height:80});
});
Original:

Class size-A:

Class size-B:

Arguments:
- width (int)(required)
- height (int)(required)
- wrap_fix (boolean)(optional):
預設為TRUE,假如它被設定為TRUE,在圖片完成縮放裁切後,會包覆一個div標籤,並設置固定尺寸及display:inline-block,這是為了讓圖片的位置符合一般預期,IE6請hack。
DEFAULT is TRUE. If it's TRUE then there is a div tag would be wrap the image for fix the position offset.
Notice:
- 之所以需要wrap_fix這個參數來修正圖片位置,主要是因為本 Plugin 的原理,是使用CSS的Clip屬性來完成仿裁切的效果,在設定Clip時需設定position為absolute,以及Clip的範圍,為避免這些設定會影響圖片的位置顯示,才會使用包覆div的方式來修正。當效果套用至圖片後,其部份樣式設定可能不如預期,若您不了解 CSS Clip設定的原理,建議不要再附加任何樣式設定於圖片上。(例如:border相關設定、margin、padding 等)
- Support:IE6+, Firefox, Chrome