我正在尝试使用组成一个盒子的4个正方形图像来复制eBay的“今日”特色卖方布局(请参见图像),但要使用Bootstrap。我真的很难理解如何实现这一目标。我可以或多或少地获得正方形,并且在lg,md和sm规则上看起来还可以,因为当然不需要按比例放下东西,并且我可以将每个正方形固定为一定的宽度和高度。但是,当涉及到移动设备时,这会消失在窗口之外,因为需要根据窗口大小进行调整。

javascript - 响应式网格的4个图像-LMLPHP

目前,我想出的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;
                }
    }
}


请帮我。这让我发疯:(。谢谢!

最佳答案

您可以使用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>

关于javascript - 响应式网格的4个图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32445558/

10-14 14:38
查看更多