html - 响应式 DIV 和背景

Question

我第一次做一些响应式 DIV，现在我已经制作了响应式背景，我希望我的内容看起来像这样:

但它看起来像这样:

如果有人能帮助我，那就太好了。这是我的代码，您可以看到我在做什么

jsFiddle

HTML:

<div class="container">
    <div class="leftColumn"><img src="projekt.png" width="400" height="400"></div>
    <div class="rightColumn"><img src="projekt2.png" width="400" height="400"></div>
</div>

CSS:

.container {width:100%;}

.leftColumn  {width:50%; float:left;}
.rightColumn {width:50%; float:left;}

@media(max-width:400px)
{
.leftColumn  { width:100px; float:none; display:block; position:relative; background-color:red; }

.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }

}

图像为 400 x 400 像素，背景图像为 1920 x 1080

Answer 1

对于背景，使用 background-size属性 (CSS3)。

.container {width:100%;}

.leftColumn  {width:50%; float:left;}
.rightColumn {width:50%; float:left;}

@media(max-width:400px)
{
    .container {
        width: 400px;
        height: 400px;
        background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
        background-size: 400px;
    }    
    .leftColumn  { width:100px; float:none; display:block; position:relative; background-color:red; }
    .rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }
}
@media (min-width:401px) and (max-width:800px)
{
    .container {
        width: 800px;
        height: 800px;
        background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
        background-size: 800px;
    }    
    .leftColumn  { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:red; }
    .rightColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:blue; }
}

http://jsfiddle.net/XmqNy/235/