4 幅图像的响应式网格

Question

我正在尝试复制 eBay 的 'Today' 特色卖家布局，将 4 个正方形图像组成一个盒子（见图），但使用 Bootstrap。我真的很难理解如何实现这一目标。我可以获得或多或少均匀的正方形，并且在 lg、md 和 sm 规则上看起来还不错，因为当然不需要按比例放置东西，我可以让每个正方形具有固定的宽度和高度。但是，当涉及到移动设备时，这会超出 window，因为它需要根据 window 大小进行调整。

我目前想出的 html 基本上是一个网格，分为 9 和 3，（col-xs-9 和 col-xs-3），给定高度在每个 desktop/tablet 宽度处。

图像有时是方形图像，有时是横向或纵向格式的图像，在这种情况下，它们将保持纵横比并扩展到最大尺寸，但在包含 div.

有没有一种方法可以使用 Bootstrap 实现此目的，或者我是否需要使用 javascript 来寻找替代方案？

下面的代码，以备不时之需：

HTML

<div id="featured-merchant-container">
  <div class="featured-merchant-listings">
    <div class="row">
      <div class="primary-img-container col-xs-9 col-sm-9 col-md-9 col-lg-9 no-padding-right">
        <div class="big-hero-image">
          <a ng-if="merchant.userListings[0].primaryImage" ng-href="/#!/users/{{merchant._id}}">
            <span class="thumb">
              <img ng-src="{{merchant.userListings[0].primaryImage}}" />
            </span>
          </a>
          <a ng-if="!merchant.userListings[0].primaryImage" ng-href="/#!/users/{{merchant._id}}">
            <span class="thumb">
              <img ng-src="img/placeholder.png" />
            </span>
          </a>
        </div>
      </div>
      <div class="secondary-img-container col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding-left">
        <div class="big-hero-images">
          <div class="first">
            <a ng-if="merchant.userListings[1].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="{{merchant.userListings[1].primaryImage}}" />
              </span>
            </a>
            <a ng-if="!merchant.userListings[1].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="img/placeholder.png" />
              </span>
            </a>
          </div>
          <div class="second">
            <a ng-if="merchant.userListings[2].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="{{merchant.userListings[2].primaryImage}}" />
              </span>
            </a>
            <a ng-if="!merchant.userListings[2].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="img/placeholder.png" />
              </span>
            </a>
          </div>
          <div class="last">
            <a ng-if="merchant.userListings[3].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="{{merchant.userListings[3].primaryImage}}" />
              </span>
            </a>
            <a ng-if="!merchant.userListings[3].primaryImage" ng-href="/#!/users/{{merchant._id}}">
              <span class="thumb">
                <img ng-src="img/placeholder.png" />
              </span>
            </a>
          </div>
        </div>
      </div>
      </div>
  </div>
</div>

CSS:

#featured-merchant-container {
    border: 1px solid green-grey;


    .big-hero-image {
            text-align:center;
            .thumb {
                display:block;
                border-right:1px solid green-grey;
                height:413px;
                display:table-cell;
                vertical-align:middle;
                text-align:center;
                img {
                    width:100%;
                    height:413px;
                }
            }
    }

    .big-hero-images {
            text-align:center;
            // border-left:1px solid green-grey;
            .thumb {
                display:block;
                height:137px;
                display:table-cell;
                vertical-align:middle;
                text-align:center;
                img {
                    width:100%;
                    height:137px;
                }
            }
            .first, .second {
                    border-bottom:1px solid green-grey;
                }
    }
}

请帮助我。这让我发疯:(。谢谢！

Answer 1

你能用 flex-box 布局做点什么吗？

.cols {overflow: hidden;}
.cols .col {float: left; width: 25%;}
.cols .col:first-child {width: 75%;}
.cols .col img {width: 100%;}

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex-item {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

<div class="cols">
  <div class="col">
    <img src="http://placehold.it/350x350" alt="" />
  </div>
  <div class="col">
    <div class="flex-container">
      <div class="flex-item"><img src="http://placehold.it/350x350" alt="" /></div>
      <div class="flex-item"><img src="http://placehold.it/350x350" alt="" /></div>
      <div class="flex-item"><img src="http://placehold.it/350x350" alt="" /></div>
    </div>
  </div>
</div>

Answer 2

如果您的图像将具有各种尺寸，那么您需要使用将背景大小设置为覆盖的背景图像。

.flex-item
  background-size cover
  background-image url(http://placehold.it/350x350)

或者您需要使用 object-fit，它很棒，但在 IE 中的支持很糟糕。

.flex-item img
  object-fit cover

Answer 3

谢谢大家的回答。

我设法实现这一点的方法是完全取消对网格的 Bootstrap 使用。相反，我围绕百分比构建了网格。我在网上读到一些内容，其中谈到如何提供一个百分比作为 padding-top 的值基本上可以为您提供一个具有特定纵横比的容器。例如，如果您想要 div 保持纵横比 4:3，您要做的是添加

padding-top:75%;

此 div 的样式 sheet。

只要 div 具有给定的宽度，您就可以使用 padding-top 百分比技巧提供它的高度。因为我希望网格中的所有 div 都是正方形，所以我添加了

`padding-top:100%;`

他们每个人。所以对于网格中的大图像，css（手写笔）如下：

.big-image {
        width: 75%;
        /* whatever width you want */
        display: inline-block;
        position: relative;
        float:left;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        font-size:0px;

        &:after {
            padding-top: 100%;
            /* 16:9 ratio */
            display: block;
            content: '';
        }
}

当然，正如你在下面看到的，div需要相对定位，并且需要在:after css选择器内添加padding。

我希望这对某人有所帮助。谢谢

4 幅图像的响应式网格

Responsive Grid of 4 images

javascript

html

css

twitter-bootstrap-3

stylus