I am facing a challenge in replicating eBay's 'Today' featured seller layout with 4 square images creating one box (refer to the image). I am using Bootstrap for this task, and I am finding it difficult to comprehend how to achieve this. I have managed to adjust the squares to look decent on lg, md, and sm breakpoints by setting fixed width and height for each square. However, this approach falls apart when it comes to mobile devices as the resizing needs to be responsive to window size.
https://i.sstatic.net/NGxD9.png
Currently, the HTML structure I have consists of a grid divided into 9 and 3 columns (col-xs-9 and col-xs-3) with predefined heights for each desktop and tablet width.
There will be instances where the images are squares, while other times they will be in portrait or landscape format. In such cases, the images should maintain their aspect ratio and expand to their maximum size within the container div.
My question is, can I achieve this layout using Bootstrap, or should I explore alternatives like incorporating JavaScript?
For reference, here is the code snippet:
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;
}
}
}
I would greatly appreciate any assistance or guidance on this matter. Thank you for your help!