jQuery套件《Mu Image Resize》圖片自動縮放與裁切居中:－【韓劇推薦】2016年8，韓劇看什麼呢？2016韓劇推薦好看的 , 2016韓劇推薦必看 , 2016韓劇 , 2016韓劇排行榜前十名 , 韓劇推薦 , 2016韓劇介紹 , 2016韓劇排行榜 , 2016韓劇列表 ,

Blogtrottr

♣梅問題‧教學網【Minwt】♣

Take the Style Quiz

Join JustFab and get one pair of extraordinary shoes or bag every month, handpicked for you by our fashion experts.

From our sponsors

jQuery套件《Mu Image Resize》圖片自動縮放與裁切居中

Nov 5th 2013, 01:30, by admin

梅問題-jQuery套件－《Mu Image Resize》圖片自動縮圖與裁切居中

　　很早之前梅干曾想過，將圖片縮到指定的大小後，再設定顯示範圍，再把抓取圖片中間的區域位置，當時光寫完圖片自動縮圖的機制後，就讓梅干死了不少的腦細胞，再加上梅干的數理不好，除了數字算半天外，再來就是程式的邏輯架構一直鬼擋牆，好在身旁有位高手男丁的協助下，才讓梅干的圖片縮圖順利完成，但心中還是一直掛念著裁切的部分，而那一天卻在網路上，無意間的發現到MRMU STUDIO的網誌中，自製分享了一隻縮圖裁切的jQuery外掛，讓使用者可以自行的設定的顯示區塊範圍，程式就會自動縮放圖片到指定範圍中，由於該外掛需在script中作設定，所以梅干稍稍的加工一下，讓它除了可透過script中來設定外，也可直接在img的標籤中來作設定，讓使用上更加的方便，因此有需要的朋友，不妨參考看看囉！！

Mu Image Resize 縮圖裁切外掛：

下載完畢，除了引用jQuery與mu.image.resize.js檔後，使用方法有二種：
方法一、在Script中設定：

$('.resize).muImageResize({width: 150, height:150}); //當這樣設定時，所有resize下的圖片都會縮成150×150

說明：

resize：圖片的類別名稱
width:150：圖片的寬度
height:150：圖片的高度

方法二、在img標籤中設定：

1.Script中插入$('.c_resize').muImageResize();
2.<img src="圖片檔名" class="c_resize" data-w="300" data-h="300"> //使用此方法，可自行設定每一張圖片的大小

說明：

c_resize：圖片的類別名稱
data-w="300"：圖片的寬度
data-h="300"：圖片的高度

設定好後，圖片就會依照指定的尺寸，縮到指定的範圍中。
梅問題-jQuery套件－《Mu Image Resize》圖片自動縮圖與裁切居中

[範例預覽]

分享給更多朋友 分享

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria
Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria
National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions