如何用背景图像创建响应式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