引导中的 CSS 动态图像大小

Question

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

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

.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 的子项的宽度由图像确定，您需要将.col 替换为.w-auto.flex-shrink-1.flex-grow-1 并将.img-fluid 添加到您的图像中。您的样式表中也有一些错误。看看sn-p：

编辑

如果您正在寻找垂直响应（不是人们通常的意思），那么在高度设置上使用单位 vh 而不要使用 .flex-shrink-1。这将使图像成为视口高度的百分比，同时保持纵横比。使用height: 30vh; 和min-height: 100px; 看看更新后的sn-p：

.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>