如何根據 window 大小優雅地縮放 div / 背景圖像以顯示更多內容

Question

我正在嘗試制作一個可以縮小以支持小型瀏覽器的頁面，但要利用大多數訪問者使用的大多數瀏覽器尺寸。

我有一個大於 1024x728 的背景圖像，但圖像的最重要部分包含在 1024x728 內......這就像雜志的出血 - 如果需要，那里有額外的圖像（如果完全展開它看起來會更好）但它是不必要。

我舉了一個例子來說明我的意思：

http://tinypic.com/r/24l5she/7

“背景圖像”是更大的瀏覽器 window 中的整個紅色框，它位於其中（藍色）有一個重復的紋理。 “帶紅色箭頭的白框”是我想接受的“最小尺寸”。 根據用戶瀏覽器的大小，我正在嘗試做的是剪切圖像的一部分，直到瀏覽器達到某個特定的最小尺寸。

這可以在像 960.gs 這樣的框架內完成嗎？

真的很期待你的回復！

干杯，

Answer 1

將您的頁面放在一個固定寬度的包裝 div 中，然后將居中的背景圖像添加到 body 標記。

Answer 2

使用 CSS3 的background-size屬性，您可以強制圖像保持恆定大小。 那么這只是你的background聲明中一個no-repeat center center位的問題。

div {
    background: url('yourpic.jpg') no-repeat center center;
    background-size: 1024px 768px
}

你真的不想支持 IE<=8，是嗎？

Answer 3

不是答案，而是更多的思考……

鑒於您的背景圖片太大，您可能只想將其從移動設備中刪除。 雖然他們中的大多數人都可以處理它，但這只是需要傳輸的額外數據，並且大多數移動運營商都有嚴格的數據限制。

就像我說的，只是需要考慮的事情。 :)