jQuery的圖像尺寸時，窗口大小

我一直在尋找和即興發揮，並拿出這樣的：jQuery的圖像尺寸時，窗口大小

$(window).resize(function() { 
    function imgResize() 
    { 
     if ($("#post_container img").width() > $("#post_container img").height()){ 
      $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
      } 
     else if ($("#post_container img").width() < $("#post_container img").height()){ 
      $('#post_container img').css({ 'width': 'auto', 'height': '80%' }); 
      } 
     else { 
      $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
      } 
    } 
})

是這樣的代碼，甚至正確的，因爲它應該做的是調整檢測窗口時，如果圖像肖像或風景，並調整它的大小，使其完全適合屏幕。

來源

2013-04-22 user2264516

您只定義了該功能，但未執行該功能。 – Terry 2013-04-22 05:54:43

您應該將此功能放在'resize'事件之外，並在事件內部調用它。 – Vishal 2013-04-22 05:56:34

由於@terry提到你已經定義了一個功能，但不執行它，你可以做到這一點外移動功能，並調用它這樣什麼：

function imgResize(){ 
    if ($("#post_container img").width() > $("#post_container img").height()){ 
     $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
    } else if ($("#post_container img").width() < $("#post_container img").height()){ 
     $('#post_container img').css({ 'width': 'auto', 'height': '80%' }); 
    } else { 
     $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
    } 
} 
$(window).resize(function() { 
    imgResize(); 
}).resize(); //<-----------this will execute when page gets ready.

或者另一種選擇是將所有在.resize()處理函數：

$(window).resize(function() { 
    if ($("#post_container img").width() > $("#post_container img").height()){ 
     $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
    } else if ($("#post_container img").width() < $("#post_container img").height()){ 
     $('#post_container img').css({ 'width': 'auto', 'height': '80%' }); 
    } else { 
     $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
    } 
}).resize(); //<-----------this will execute when page gets ready.

來源

2013-04-22 06:01:36 Jai

謝謝！好吧你有什麼想法如何在wordpress頁面上實現這一點？就像這樣： – user2264516 2013-04-22 06:19:31

知道WP（第二個版本），但仍然有一些問題。 - 如何在頁面加載時立即執行此操作？ - 如果圖像是縱向比例，當窗口寬度足夠大時，寬度將超出比率（太細） - 如果圖像是橫向比例，如果調整屏幕高度的大小，高度根本不會縮放。 – user2264516 2013-04-22 07:07:51

正確。如果圖像是縱向比例，則會跳到窗口寬度調整爲足夠薄時使頁面可滾動。但是如果你減小窗口高度，圖像會再次彈出，因爲它的寬度現在隨着窗口高度而下降。 – user2264516 2013-04-22 08:06:55

我不知怎麼把它作爲預期工作，這裏是最後的代碼至今：

$(window).load(function(){ 
    imgResize(); 
    $(window).on('resize', imgResize); 
}); 


    function imgResize(){ 

     var sW = $("#right_column_post").width(); 
     var sH = $(window).height(); 
     var iW = $("#post_container img").width(); 
     var iH = $("#post_container img").height(); 
     var eW = sW - iW; // horizontal space 
     var eH = sH - iH; // vertical space 

     if(eW > eH){ // more horizontal space 
      $("#post_container img").css("height", (sH * 0.7)); 
      $("#post_container img").css("width", 'auto'); 

     } else if (eW < eH){ // more vertical space 
      $("#post_container img").css("height", 'auto'); 
      $("#post_container img").css("width", (sW * 0.7)); 
     } else { // as much space 
      $("#post_container img").css("height", 'auto'); 
      $("#post_container img").css("width", (sW * 0.7)); 
     } 


    }

它幾乎工作，但你可以看到對處於橫向比的圖像比例失真一會兒圖像減少窗口寬度時：

http://tomiphotography.com/?p=158

的圖像也裝載時flicer位頁。我可以原諒，但比例需要修正。

來源

2013-04-22 18:00:19 user2264516

jQuery的圖像尺寸時，窗口大小

回答

相關問題