Question

我试图复制eBay的'今日'特色卖家布局，其中4个方形图像构成一个盒子（见图），但是使用了Bootstrap。我真的很难理解如何实现这一目标。我可以或多或少地得到正方形，并且在lg，md和sm规则上看起来不错，当然事情不需要按比例缩放，我可以只是每个正方形的固定宽度和高度。然而，当涉及到移动时，这会出窗，因为它需要根据窗口大小调整大小。

我现在提出的html基本上是一个分为9和3的网格（col-xs-9和col-xs-3），每个桌面/平板电脑宽度都有设定的高度。

图像有时是平方图像，有时它们将是横向或纵向格式的图像，在这种情况下，它们将保持其纵横比并扩展到它们的最大尺寸，但是在包含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的使用。我改为围绕百分比构建网格。我在线阅读了一些内容，其中讨论了如何提供一个百分比作为填充顶部的值基本上可以给你一个具有一定宽高比的容器。例如，如果你想要一个保持纵横比为4：3的div，那么你要做的就是添加

padding-top:75%;

在此div的样式表中。

只要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需要相对定位，并且需要在：css选择器之后添加填充。

我希望这有助于某人。感谢

响应网格的4张图片

3 个答案: