我正在尝试使用组成一个盒子的4个正方形图像来复制eBay的“今日”特色卖方布局(请参见图像),但要使用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;
}
}
}
请帮我。这让我发疯:(。谢谢!
最佳答案
您可以使用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/