CSS dynamic image size in bootstrap - html

Question

I got a horizontal scrolling page with bootstrap 5. All images have the same height, but different widths. My goal is that the images always use the full width of the page, so when the browser window is resized the images should shrink too.
What am I missing to achieve this? Your help is highly appreciated.
.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/bootstrap#5.0.2/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/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/333x600.png" alt="">
</div>
</div>
</div>

Answer 1

If you want the children of .flex-row to have their widths determined by the image, you need to replace .col with .w-auto.flex-shrink-1.flex-grow-1 and add .img-fluid to your images. You have some errors in your stylesheet as well. Take a look at the snippet:
EDIT
If you are looking for vertical responsiveness (not what people typically mean) then use the unit vh on the height setting and don't use .flex-shrink-1. This will make the images a percentage of the viewport height while maintaining aspect ratio. Take a look at the updated snippet using height: 30vh; and min-height: 100px;:
.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;
} */
.w-auto>img {
min-height: 100px;
/* max-height: 300px; */
height: 30vh;
padding-right: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid ">
<div class="row flex-row d-flex flex-nowrap">
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/450x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/500x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/550x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/333x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/450x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/500x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/550x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/333x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/450x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/500x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/550x600.png" class="img-fluid" alt="">
</div>
<div class="w-auto flex-grow-1">
<img src="https://via.placeholder.com/333x600.png" class="img-fluid" alt="">
</div>
</div>
</div>