CSS圖像動態調整大小

我希望我的背景圖像在調整窗口大小時動態調整大小。圖像的比例是否改變並不重要。所以我嘗試這樣做的方法是設置CSS圖像動態調整大小

width: 100vw; 
height: 100vh;

爲IMG在體。

它做我想做的，但圖像是一個標籤，所以其他標籤放置在它下面的佈局，我找不到一種方法使圖像忽略所有其他標籤。

我也無法找到一個方法來做到這一點的

body { 
    background-image: url("bckg.jpg"); 
    //hoooooow? 
}

有什麼建議？

來源

2017-02-24 Roman Korol

如果你希望你的背景圖像根據窗口大小縮放，爲什麼不使用下列內容：

body { 
    background-image: url("bckg.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}

因此，重要的一行是這樣的：background-size: cover;這確保了背景圖片「涵蓋」可見如果你不希望圖像裁剪但頁面

來源

2017-02-24 09:22:29 Daniel

非常感謝！實際上，如果沒有 ' background-attachment：fixed;' 行，它就不會以適當的方式工作。你能解釋一下嗎？ –

不客氣！根據W3School的說法，「固定」值告訴瀏覽器背景附件的行爲必須固定到視口（瀏覽器頁面的可見部分），如果將其更改爲「滾動」，則會滾動這一頁。在這裏閱讀更多：https://www.w3schools.com/cssref/pr_background-attachment.asp – Daniel

的部分始終以高度和寬度試的100％以下：

body { 
    background: url('example.png') no-repeat fixed; 
    background-size: 100% 100%; 
}

Fidd le here

來源

2017-02-24 09:26:11 dafilipaj

我發現這一個更有用 – dehood

CSS圖像動態調整大小

回答

相關問題