具有背景图像的响应式网格布局

Question

我想用图像制作网格布局，因为 background.I 想要 2 列和 2 行的网格，但具有不同的高度和宽度。它应该是响应式的，当我们调整 window 或屏幕大小时，网格和图像应该按比例调整大小。我怎样才能做到这一点？请帮我。这是我的代码。

#ser_wrap{
 margin: auto;
 border: 1px solid #fff;
 padding: 0;
}

#col1{
 background: url(images/col1.jpg) no-repeat 50% 0 #CC8F1D;
 background-size: 100%;
    background-size: cover;
 -webkit-background-size: cover;
    -moz-background-size: cover;
 height: 100%;
 min-height: 35vh;
 padding: 0;
}

#col2{
 background: url(images/col2.jpg) no-repeat 50% 0 #BA7677;
 background-size: 100%;
    background-size: cover;
 -webkit-background-size: cover;
    -moz-background-size: cover;
 height: 100%;
 min-height: 45vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ser_wrap" class="col-lg-12">
     <div id="col1" class="col-md-5 col-lg-5">
         
        </div>
        <div id="col2" class="col-md-7 col-lg-7">
        </div>
    </div>

Answer 1

我想你期望的结果如下：

#ser_wrap{
 margin: auto;
 border: 1px solid #fff;
 padding: 0;
}

#col1{
 background: url(http://www.sonoravirtual.com/images/events/big/304946bde31e3ad3853a70a02b97e1d4.jpg) no-repeat 50% 0 #CC8F1D;
 background-size: 100%;
    background-size: cover;
 -webkit-background-size: cover;
    -moz-background-size: cover;
 height: 100%;
 min-height: 35vh;
 padding: 0;
}

#col2{
 background: url(http://www.sonoravirtual.com/images/events/big/304946bde31e3ad3853a70a02b97e1d4.jpg) no-repeat 50% 0 #BA7677;
 background-size: 100%;
    background-size: cover;
 -webkit-background-size: cover;
    -moz-background-size: cover;
 height: 100%;
 min-height: 45vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ser_wrap" class="col-lg-12">
     <div id="col1" class="col-md-5 col-lg-5">
        <!-- <img src="http://www.sonoravirtual.com/images/events/big/304946bde31e3ad3853a70a02b97e1d4.jpg" class="img-responsive"> -->
        </div>
        <div id="col2" class="col-md-7 col-lg-7">
        <!-- <img src="http://www.sonoravirtual.com/images/events/big/304946bde31e3ad3853a70a02b97e1d4.jpg" class="img-responsive"> -->
        </div>
    </div>

在 "img" 标签中使用 bootstrap 框架中包含的 "img-resposive" class。

Answer 2

不确定这是否是您要查找的内容，但是使用 table/tr/td 可以解决 2 column/2 行难题。如果您需要图像，可以轻松更改这些背景，方法是将它们放在 CSS 的背景标签中，您已经完成了。这是一个快速的 JSfiddle 来展示我的意思。我意识到这不是最优雅的解决方案，但它很快:)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="ser_wrap" class="col-lg-12">
   <table cellpadding=4>
        <tr colspan = 2>
            <td id="col1"></td>
            <td id = "col3"></td>         
        </tr>
        <tr colspan = 2>
            <td id="col2"></td>
            <td id = "col4"></td>
        </tr>
    </table>
</div>

然后是 CSS

#ser_wrap{
    margin: auto;
    border: 1px solid #fff;
    padding: 0;

}

#col1{
    background: url(images/col1.jpg) no-repeat 50% 0 #CC8F1D;
    background-size: 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    width: 200px;
    height:200px;
    min-height: 35vh;
    padding: 0;

}

#col2{
    background: url(images/col2.jpg) no-repeat 50% 0 #BA7677;
    background-size: 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    width: 200px;
    height:200px;
    min-height: 45vh;
}

#col3{
    background: black;
    background-size: 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    width:200px;
    height:200px;
    min-height: 45vh;
}

#col4{
    background: red;
    background-size: 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    width: 200px;
    height:200px;
    min-height: 45vh;
}

https://jsfiddle.net/wwgco40v/2/

具有背景图像的响应式网格布局

Responsive Grid Layout with background image

html

wordpress

css

responsive-design

grid-layout