Question

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

    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute( 
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }

#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;
}

Answer 1

我想你期望结果如下：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

使用＆＃34; img-resposive＆＃34;包含在bootstrap框架中的类＆＃34; img＆＃34;标签

Answer 2

不确定这是否是您正在寻找的，但是使用table / tr / td可以解决2列/ 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/

响应式网格布局与背景图像

2 个答案: