動態圖像調整大小

Question

我在網頁上有一張圖片，需要拉伸以適應窗口中的可用空間，同時保持其比例。下面是我得到了什麼：

http://www.lammypictures.com/test/

我想大的圖像按比例拉伸企及的高度和瀏覽器的寬度，減去的div的左側和底部的大小。

所以問題真的是2折;首先我需要得到最大高度和寬度減去鏈接和圖像欄，其次我需要調整瀏覽器的圖像大小，同時保持比例。

任何幫助將不勝感激。

乾杯 CIP

Answer 1

你可以嘗試使用jQuery UI縮放效果：

$(document).ready(function() { 

    resizeImage(); // initialize 

    $(window).resize(function() { 
     resizeImage(); // initialize again when the window changes 
    }); 

    function resizeImage() { 
     var windowHeight = $(window).height() - $('#nav').height(), 
      windowWidth = $(window).width(), 
      percentage = 0; 

     if (windowHeight >= windowWidth) { 
      percentage = (windowWidth/$('#image').width()) * 100; 
     } 
     else { 
      percentage = (windowHeight/$('#image').height()) * 100; 
     } 

     $('#image').effect('scale', { percent : percentage }, 1); 
    }; 
}); 

測試和工程巨大，但是，一些調整可能需要得到它只是你喜歡的方式。

Answer 2

你可能只是沒有設置圖像元素的寬度和高度屬性，並寫入下一個樣式：

.hentry img { max-width: 100%; } 

它會收縮相對最小邊。

P.S.但不在位置：絕對;塊沒有任何大小。將父塊設置爲相對定位。