引導程式中的CSS動態影像大小

我得到了一個帶有 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/[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>

uj5u.com熱心網友回復：

如果您希望 的孩子的.flex-row寬度由影像確定，則需要替換.col為.w-auto.flex-shrink-1.flex-grow-1并添加.img-fluid到您的影像中。您的樣式表中也有一些錯誤。看一下片段：

編輯

如果您正在尋找垂直回應（不是人們通常的意思），那么vh在高度設定上使用單位，不要使用.flex-shrink-1. 這將使影像成為視口高度的百分比，同時保持縱橫比。使用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>

標籤：html css 推特引导 图像大小调整 bootstrap-5

上一篇：Bootstrap3hidden-*不適用于中間視窗大小

下一篇：如何在頁面加載時將react-bootstrap進度條從0影片化到N？