Question

我有这个响应式html＆amp; 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

我也不想要尺寸限制我尝试删除大小限制并添加背景....但似乎错误4

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 {
	width: 100%;
	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

如何使用背景图像创建响应式div？

3 个答案: