Question

我有四张图像应该像这样对齐：

 ____________
|1    |4     |
|_____|      |
|2 |3 |      |
|__|__|______|

他们之间不需要空格，是视口宽度的100％，而且，这里是踢球者，他们需要做出回应。

所以我的问题是，做这样看似简单的事情的最佳做法是什么？使用img标签并准确调整图像大小（上传前）？使用背景图像并使用CSS调整大小，然后使用JS调整页面大小调整大小？其他一些方式？

我应该说我正在使用带有行和列的Boostrap 3来执行此操作，但无法使列高度达到百分比高度。

谢谢！

Answer 1

一个选项是创建一个响应包装器，将包装器设置为相对定位，然后绝对定位包装器的子项。

我刚试过这个并且效果很好。我将我的身体设置为100％的高度和宽度，然后将包装设置为50％。在浏览器调整大小时，包装器会缩小，图像也会缩小，同时保持其宽高比和在组中的位置。

CSS：

.wrapper {

    position: relative;
    padding-bottom: 50%;
    width: 50%;

}

.one, .two, .three, .four {

    position: absolute;

}

.one {

    width: 50%;
    left: 0;
    top: 0;

}

.two {

    width: 25%;
    bottom: 0;
    left: 0;

}

.three {

    width: 25%;
    bottom: 0;
    left: 25%;

}

.four {

    width: 50%;
    bottom: 0;
    right: 0;
    top: 0;

}

HTML：

 <div class="wrapper">

    <img src="../images/one.jpg" class="one"> 

    <img src="../images/two.jpg" class="two"> 

    <img src="../images/three.jpg" class="three"> 

    <img src="../images/four.jpg" class="four"> 

</div>

Answer 2

您可以使用CSS修改的Bootstrap网格，确保图像的自然宽度和高度正确加起来：

DEMO：https://jsbin.com/caramo

enter image description here

<强> HTML

   <div class="container">
    <h2>Flush Grid</h2>
    <div class="row flush-grid">
       <div class="col-sm-6">
          <img src="http://lorempixel.com/600/400/fashion" alt=""> 
          <div class="row flush-grid">
             <div class="col-xs-6"><img src="http://lorempixel.com/300/400/food" alt="" ></div>
             <div class="col-xs-6"><img src="http://lorempixel.com/300/400/city" alt="" ></div>
          </div>
       </div>
       <div class="col-sm-6 row">
          <div class="col-xs-12">
             <img src="http://lorempixel.com/600/800/city" alt="" >
          </div>
       </div>
       <!--/.row.flush-grid -->
    </div>
    <!--/.container-->

<强> CSS

/* Flush Grid */
.row.flush-grid img {
    width: 100%;
    height: auto;
    float:left;
}
.row.flush-grid {
    margin-left: 0;
    margin-right: 0;
}
.row.flush-grid [class*="col-"] { padding:0;}
.row.flush-grid [class*="col-"].row { padding:0;margin:0;}

网格中的响应图像

2 个答案: