2012-07-28 75 views
4

我正在尋找一種方法來使我的動態縮放圖像適合我製作的圖像映射。 我使用jQuery規模與窗口大小的圖像:縮放ImageMap與動態大小的圖像協調

$(window).bind("load resize", function(){ 

     $(".post img").height($(window).height()-110); 
     $(".post img").width(($(".post img").newHeight()/$(".post img").oldHeight()) * $(".post img").oldWidth()); 

}); 

但圖像映射我做忠於原來的尺寸。我正在尋找ImageMapster,但不知道如何自動製作所有的圖像縮放比例。

這是它的頁面: http://www.dersuawesome.com/home/

回答

3

imagemapster你使用:$( 'IMG')mapster( '調整',寬度,高度,持續時間);從原始文檔imagemapster

引證:

$( 'IMG')mapster( '調整大小',寬度,高度,持續時間)。 --- 圖像:圖像的新寬度或 高度:圖像的新高度 持續時間:(可選)0 |毫秒(爲調整大小設置動畫效果) 這會將圖像大小調整爲指定的大小。請注意,寬度>或高度應通過,另一個將按照與原始圖像相同的寬高比計算得出 。如果您同時通過 ,則只有寬度將用於計算新尺寸: 比例必須與原始圖像保持相同。

引用結束。 例如。當圖像應該成爲900像素寬的使用:

$('img').mapster('resize',900,null,2000); 

在這裏,我告訴imagemapster使用2000毫秒這個resizeing獲得流暢的效果。 把這個到代碼的onconfigured段很適合我:

onConfigured: function(){ 
     $('img').mapster('resize',900,null,2000); 
     } , 
+0

編:imagemapster筆者在這裏有一個完整的調整大小,例如:http://www.outsharked.com/imagemapster/default。 aspx?demos.html#resize – Kurt 2012-07-29 07:12:25

+0

addendum2:來自imagemapster作者的另一個完整示例位於以下位置:http://jsfiddle.net/jamietre/jQG48/ – Kurt 2012-07-29 07:59:50

+0

但是,這不會將其調整爲預定大小。我需要圖像自動適合圖像尺寸 – 2012-07-29 08:32:52