I have a horizontal scrolling page implemented with bootstrap 5. The images all have the same height but varying widths. My objective is for the images to always fill the width of the page, so they should resize accordingly when the browser window size changes.
What steps do I need to take to achieve this? Any assistance would be greatly appreciated.
https://i.sstatic.net/LqIwV.png
.container-fluid{
/* Vertical Scroll */
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100%;
}
.flex-nowrap {
-webkit-flex-wrap: nowrap!important;
-ms-flex-wrap: nowrap!important;
flex-wrap: nowrap!important;
}
.row {
flex-direction: column;
}
.col > img {
min-height: 100px;
max-height: 300px;
height: 300px;
padding-right:10px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4845455e595e584b5a6a1f041a0418">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid ">
<div class="row flex-row d-flex flex-nowrap">
<div class="col">
<img src="https://via.placeholder.com/450x600.png" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/500x600.png" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/550x600.png" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/333x600.png" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/450x600.png" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/500x600.png" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/550x600.png" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/333x60 [...]