根據瀏覽器窗口大小調整不同大小的圖像

我在我的網站上並排放置了三個不同大小的圖像，並希望使用jQuery根據瀏覽器大小調整大小。根據瀏覽器窗口大小調整不同大小的圖像

$(window).bind('load resize', function() { 
    var windowheight = $(window).height(); 
    $('#pictures img').each(function() { 
     $(this).height(windowheight); 
    }); 
});

並在CSS文件中我有：

#pictures img { 
    width:auto; 
    max-height:100%; 
}

該代碼將是正確的，如果每個圖像具有相同的高度，但我不知道要傳遞給高度值（）功能考慮到所有三個圖像都有不同的高度。

任何想法？

在此先感謝

來源

2013-02-03 user1991185

在你的CSS

img {max-width:100%;max-height:100%;}

那麼您還可以設置你的容器維度％，因此實際上你並不需要爲

NB1的javascript：「真正的「調整一個完美的渲染應該發生在服務器端;但是這會是kinna慢上飛

NB2：現在有，與客戶端的大小調整的現代瀏覽器解決方案（它比設定高度更復雜的...）

來源

2013-02-03 11:31:30 mikakun

你可以在屏幕高度和寬度（解釋爲here和here），然後您可以使用一些簡單的數學來重新設置圖片大小。像

picture_new_height = (actual_picture_height) * (window_height/screen_height)

來源

2013-02-03 11:40:30 Ankit

只有一個問題，爲什麼我需要屏幕高度呢？ – user1991185

您需要一個固定值，以便您可以將它分成..它會給你窗口高度與屏幕高度的比率。例如，如果你的窗口的高度是屏幕高度的一半，那麼你的圖像高度也需要是其原始高度的一半。這就是我們在上面的計算中所做的 – Ankit

根據瀏覽器窗口大小調整不同大小的圖像

回答

相關問題