如何用背景圖像創建響應式div？

Question

我有這樣的響應HTML & CSS代碼

<div class="ibox"> 
    <div class="ibox1"></div> 
    <div class="ibox2"></div> 
    <div class="ibox2"></div> 
    <div class="ibox2"></div> 
</div> 

CSS：

.ibox{ 
    width:200px; 
    height:100px;  
    border:1px solid red; 
    max-width:100%; 
} 

.ibox1{ 
    width:100px; 
    height:90px;  
    border:1px solid yellow; 
    margin:5px; 
    float:right; 
    max-width:40%; 
} 

.ibox2{ 
    width:80px; 
    height:25px;  
    border:1px solid green; 
    margin:5px; 
    max-width:40%; 
} 

我怎麼可以添加BOX1和BOX2一個負責任的圖像背景？

例如這裏是一個演示前添加背景：

jsfiddle1

我也不想大小限制， 我試圖刪除的大小限制，並添加背景....但它似乎wrong4

jsfiddle2

Answer 1

更多你在找什麼？ http://jsfiddle.net/jq3y3oab/7/

我加

html, body { 
    width: 100%; 
    height: 100%; 
} 

，這樣的.ibox相對值不塌陷以0

Answer 2

試試這個，我猜它你想要什麼

<style> 
 
.ibox{ 
 
    width:100%; 
 
    height:90px;  
 
    border:1px solid red; 
 
    text-align: left; 
 
} 
 

 
.ibox1{ 
 
    width:50%; 
 
    height:88px;  
 
    float:right; 
 
    background: red; 
 
    margin: 1px; 
 
    
 
} 
 

 
.ibox2{ 
 
    width:49%; 
 
    float: left; 
 
    height:28px;  
 
    background: blue; 
 
    margin: 1px; 
 
} 
 

 

 
@media only screen and (min-width : 320px) and (max-width : 568px) { 
 

 
.ibox1{ 
 
    width: 100%; 
 
    height:90px;  
 
    float:left; 
 
    background: red; 
 
    
 
} 
 

 
.ibox2 { 
 
\t width: 100%; 
 
\t clear: both; 
 
} 
 

 
.ibox{ 
 
    width:100%; 
 
    height:182px;  
 
    border:1px solid red; 
 
    text-align: left; 
 
} 
 

 
} 
 
</style>

<div class="ibox"> 
 
    <div class="ibox1"></div> 
 
    <div class="ibox2"></div> 
 
    <div class="ibox2"></div> 
 
    <div class="ibox2"></div> 
 
</div>

Answer 3

我想你應該可以使用以下屬性在CSS

background-size: contain; 
background-repeat: no-repeat; 

我改變你的撥弄了一下，希望這有助於！

JSFIDDLE