CSS bootstrap 中的动态图像大小

Question

我得到了一个水平滚动页面 bootstrap 5. 所有图像的高度相同，但宽度不同。我的目标是图像始终使用页面的整个宽度，因此当浏览器 window 调整大小时，图像也应该缩小。

我缺少什么来实现这个目标？非常感谢您的帮助。

.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

如果想让.flex-row的children的宽度由图片决定，需要将.col替换为.w-auto.flex-shrink-1.flex-grow-1并添加.img-fluid 到您的图像。您的样式表中也有一些错误。看看片段：

编辑

如果您正在寻找垂直响应（不是人们通常的意思），请在高度设置上使用单位 vh，不要使用 .flex-shrink-1。这将使图像成为视口高度的百分比，同时保持纵横比。使用 height: 30vh; 和 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>

CSS bootstrap 中的动态图像大小

CSS dynamic image size in bootstrap

html

css

image-resizing

twitter-bootstrap

bootstrap-5

编辑