將圖像壓成窗口，除非窗口大於圖像

Question

好的，所以我在我的網頁中有一個圖像。

如果用戶的窗口高度小於800像素（圖像的高度），應將圖像壓扁（以便用戶可以看到圖像的整個高度）。

另一方面，如果窗口高度大於800像素，圖像應該垂直居中。

任何提示？

謝謝。

Answer 1

使用jQuery，你可以這樣做：

var win = $(window); 
win.load(function() { 
    var image = $("#img"); 
    if (image.height() > win.height()) { 
    image.height(win.height()); 
    } else { 
    // assuming your image is positioned absolute 
    // you should measure its dimensions and then position it 
    // depends on the ways it should be centered... in the current window or the whole document? 
    } 
}); 

win.resize(function() { /* do something */ }); 

應該做的把戲像正好調整到窗口的高度，如果圖像是更大的選擇必須適合你的圖像元素當然...

編輯：添加調整大小回調