響應div與背景圖像

我正在做div內的視差效果，我通過調整背景圖像與滾動執行，我需要它響應不同的屏幕尺寸。我希望圖像根據100％寬度和自動高度進行適當縮放。問題是，由於圖像是背景圖像，div是空的，所以我必須給它指定一個高度。當你這樣做的時候，響應能力被限制在你設定的任何高度。我該如何解決這個問題，以便高度可以隨着背景圖像的高度自由改變？響應div與背景圖像

它會讓感覺，當你在看小提琴 http://jsfiddle.net/d2620kgk/

HTML：

<div id='bg-image'></div>

CSS：

#bg-image{ 
    background-image: url('../images/portfolio/stoneybrook-full4.jpg'); 
    background-size:100% auto; 
    width:100%; 
    height:500px; 
    background-repeat:no-repeat; 
}

來源

2015-01-15 user2755541

嘗試刪除'高度：500px'和加'min-height：500px'。 –

#bg-image{ 
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Grant_DeVolson_Wood_-_American_Gothic.jpg/639px-Grant_DeVolson_Wood_-_American_Gothic.jpg'); 
    background-size:100%; 
    position: absolute; 
    width:100%; 
    height:100%; 
    top: 0; 
    left: 0; 
    background-repeat:no-repeat; 
}

來源

2015-01-15 00:59:34

這使圖像消失bc的高度變成0px。 – user2755541

等一下，其實你是對的。它的工作原理...現在我必須弄清楚這與我的實際代碼有什麼不同。 – user2755541

看起來像其他內容是僞裝的。看到更新的小提琴：http://jsfiddle.net/d2620kgk/2/ – user2755541

響應div與背景圖像

回答

相關問題