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

好的，所以我在我的網頁中有一個圖像。將圖像壓成窗口，除非窗口大於圖像

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

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

任何提示？

謝謝。

來源

2012-05-07 JoeRocc

我在任何不屬於基本的JavaScript/CSS/HTML，所以沒有什麼比用CSS玩弄其他相當可怕的。 – JoeRocc

檢查我的小回答給你一個你可以做什麼的提示......定位取決於你想要達到的目標......只把它放在窗口中間是不夠的>如果用戶再滾動呢？ –

使用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 */ });

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

編輯：添加調整大小回調

來源

2012-05-07 17:14:45

太棒了！我唯一的問題是：我是否需要使用setInterval來保持檢查這只是他們改變窗口大小？還是有一些觸發器可以使用，比如「onWindowDimensionChange（）」？ – JoeRocc

查看已編輯的代碼... win.resize apllies事件監聽器觸發由瀏覽器觸發的「resize」事件...請小心，如果DOM更改，IE7有時會觸發resize事件，因此您的代碼可能會運行到循環中在HTML/CSS上） –

托比亞斯，你是我的救星！ – JoeRocc

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

回答

相關問題