Div內div包括背景圖片

我有兩個div。第一個是「父」，它提供了另一個div的寬度和高度。第二個div具有背景附件：固定並存在問題...當寬度：100％和高度：100％時，我的圖像不會顯示。當圖像的高度爲800px時，一切都很好，但是當我更改屏幕分辨率時，第一個div不會與圖像一起縮放，因此圖像與其餘內容之間有空白區域。任何想法如何解決它？感謝您的答覆！Div內div包括背景圖片

<div class="divimgparent"> 
<div class="divimg"></div> 
</div> 
.divimgparent {width: 100%; height: auto;} 
.divimg {background: url("../images/1.jpg"); width: 100%; height: 800px; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

來源

2015-11-03 Dariusz Krupa

是的，這是因爲你需要給父母或孩子的'高度'。 'height：auto;'基於你擁有的內容工作。它沒有特定的高度，在100％的情況下，它認爲'.divparentimg' – divy3993

的100％更改了background-size css屬性。 'background-size：cover;'然後圖像將根據屏幕分辨率拉伸。 –

試試這個。這裏你的父母的div沒有得到你的CSS高度時的高度：auto ;.所以，你需要爲你的父div定義一個高度。

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.divimgparent { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.divimg {background: url("http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg");width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

<div class="divimgparent"> 
 
<div class="divimg"></div> 
 
</div>

來源

2015-11-03 04:20:50 user2584538

<div class="divimgparent"> 
    <div class="divimg"></div> 
</div>

.divimgparent {width: 100%; height: 90vh;} 
 
.divimg {background: url("http://s9.postimg.org/bxayc3y3z/Desert.jpg"); width: 100%; height:100%; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

請試試這個。

demo

來源

2015-11-03 04:52:19 user5469923

Div內div包括背景圖片

回答

相關問題