可在網頁上縮放的背景圖片

wetransfer網站通常具有在調整瀏覽器大小時可縮放的背景圖像。我希望以最簡單的方式達到同樣的效果。換句話說，如果我拖動瀏覽器窗口的底角，我希望背景圖像的尺寸相應地改變。可在網頁上縮放的背景圖片

謝謝！

2012-01-23 Eric Brotto

您可以按照tutorial中所述的方法進行此操作。

從教程中，簡單的CSS方法是使用background-size屬性。

html { 
     background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
}

封面讓圖像在保持縱橫比的情況下拉伸，使包含區域的一個維度得到充分利用。包含可選值，它將圖像的縱橫比拉伸至完全適合該區域，或100％100％，這樣可以拉伸圖像，同時消除縱橫比。

您可能還需要看一看在CSS 3的參考在w3schools

來源

2012-01-23 09:12:06

可以給'html' a背景？「身體」會更好嗎？ – 472084

您可以使用任何。但是，我引用了教程：'我們將使用html元素（比body更好，因爲它總是至少是瀏覽器窗口的高度）' –

這很好，但如果您需要像WeTransfer那樣在圖像之間淡出，你需要在HTML/body元素上使用除背景圖像以外的其他東西 - 例如寬度/高度爲100％的固定div –

我最近利用全屏顯示圖像，所以我在這個安靜了許多已經研究jQuery的全屏內容滑塊。

瀏覽了無數教程，聲稱導致全屏幕背景圖像後，我發現了一篇優秀的文章，描述瞭如何用大約四種不同的技術來實現這一點 - 並且它很容易在10分鐘內完成。

這裏是鏈接到相應的文章：http://css-tricks.com/perfect-full-page-background-image/

而且僅作參考，這裏是鏈接到我所做的滑塊：http://hieroishere.com/fullscreenslider/

享受

來源

2012-01-23 09:12:45 ninty9notout

看看這個：

http://css-tricks.com/how-to-resizeable-background-image/

來源

2012-01-23 09:13:38

你甚至不需要使用JS。 CSS3會爲你做它：

html { 
     background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
}

來源

2012-01-23 09:14:20

這很像另一個答案。 – 472084

謝謝！沒有看到其他人同時發佈相同的內容？刪除它？ –

最簡單的方法就是這個 - 沒有CSS3和HTML5需要：

img { 
max-width: 100%; 
}

編輯：

剛剛意識到你的問題涉及到背景圖片 - 所以你可以使用這個：

background-size: 100% 100%;

來源

2012-01-23 09:18:59 Ninja

這會在用戶調整瀏覽器大小時動態調整圖片大小。 –

是的，這是正確的。 100％100％將使背景圖像的大小達到「背景定位區域」的寬度和高度的100％ - 因此，在調整瀏覽器大小時，圖像將調整大小。請在此處詳細閱讀：https：//developer.mozilla.org/en/CSS/background-size – Ninja

可在網頁上縮放的背景圖片

回答

相關問題