使用jQuery動態地按比例調整的IMG

的問題：爲了使一個插件內將圖像調整動態（H & W，按比例），其變短的窗口大小調整（基本上有三個方面DIV中：頂部 - 靜態，底部 - 靜態的，中間 - 動態）與width:100%和top:#pxbottom:#px。這些圖像還必須最終只有調整自己設定的高度（603x427）使用jQuery動態地按比例調整的IMG

這裏的頁面：

My current woe

我相當的接近，但與下面的代碼會發生什麼：

<script type="text/javascript"> 
      $(window).resize(function() { 
       var hgt = $(window).height() - 427; 
       var wid = $(window).width() - 633; 
       $('.slides_container img').height(hgt); 
       $('.slides_container img').width(wid); 
       $('.slides_container').height(hgt-30); 
       $('.slides_container').height(hgt); 
       $('.vid').width($(window).width()); 
      }); 
</script>

是形象的高度變化，一樣的寬度，但他們不按比例改變。相反，寬度正確更改，高度正確更改，但相互獨立。我希望圖像保持成比例。

圖例：.slides_container是插件的一部分，包含圖像，.slides_container img是圖像，.vid包含用於居中的.container。對於上面的代碼，$('.slides_container').height(hgt-30);是允許分頁的。

來源

2012-04-08 Adam

使用，而不是CSS（）函數：

$(window).resize(function() { 
    var hgt = $(window).height() - 427; 
    var wid = $(window).width() - 633; 
    $('.slides_container img').css({ 
     width:wid, 
     height:hgt 
    }); 
    $('.slides_container').height(hgt); 
    $('.vid').width($(this).width()); 
});

來源

2012-04-08 22:38:54 faino

仍然得到高度和寬度不成比例彼此。高度變小，寬度變小，寬度變窄，高度變小。再次，我正在尋找動態_and_比例窗口調整大小。那麼，有沒有辦法將兩者結合在一起？ – Adam 2012-04-08 23:09:27

好吧，爲了讓圖像動態調整大小，我使用了'width：'auto'，'（見編輯）。 – Adam 2012-04-09 10:36:37

至少我嘗試添加一個編輯。無論如何，將寬度更改爲「自動」工作。儘管我仍然試圖讓jQ在onload加載。我如何？圖像只在調整窗口大小後調整大小... – Adam 2012-04-09 15:29:26

如果這是可能的妥協，沒有你可以把它背景的img元素，那麼我認爲這是你在找什麼http://css-tricks.com/how-to-resizeable-background-image/

否則，只要你有原始比（比= orgWidth/orgHeight），你可以把它和反映它的寬度/高度。在調整大小時，height = org_height * ratio。之前完成的，這是很簡單的： How to resize images proportionally/keeping the aspect ratio?

來源

2012-04-08 23:32:37 ido

不幸的是，.css解決方案不會這樣做：它只調整寬度。它也必須調整高度，因爲隨着窗口變窄，窗口變短和寬度變得更小。 – Adam 2012-04-09 10:29:48

使用jQuery動態地按比例調整的IMG

回答

相關問題