CSS dynamic image size in bootstrap

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/[email protected]/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/[email protected]/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>