与背景图象的敏感网格布局

2 回答

• 0

  我想你期望结果如下：

  #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”类 .

  回复于 2024-04-29T07:05:44+08:00
• 0

  不确定这是否是您正在寻找的，但是使用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/

  回复于 2024-04-29T07:05:44+08:00