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>

Arleigh Hix · Accepted Answer · 2021-11-12 16:36:21Z

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>

Thanks for your suggestion, but this behaviour is not correct, imagine i have 20 images (I updated your example with more images). I want to scroll horizontally. your solution resizes images by page-with and not page-height

Collectives™ on Stack Overflow

CSS dynamic image size in bootstrap

1 Answer 1

EDIT

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related