超出父容器范圍的影像

我有一個 div 包含周圍間隔的影像。問題是我添加到該 div 的影像越多，位于第一個位置的影像就會超出主容器 div 的范圍。我添加了table-responsive該類以使主容器可滾動，但是第一個位置的影像超出了范圍，因此我什至無法滾動并查看第一個位置的影像。如何修復它以使影像不會超出父容器的范圍？要查看第一個影像不同，請洗掉該容器中的一些影像，您會看到該影像確實存在。任何幫助表示贊賞。提前致謝。

.infoBar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  top: 15%;
  width: auto;
  height: 10%;
  max-width: 95%;
  column-gap: 25px;
  background-color: green;
}

.infoBar::-webkit-scrollbar {
  display: none !important;
}

.infoBar .imgWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 20%;
  cursor: pointer;
}

.infoBar .imgWrap img {
  height: 100%;
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<!-- the more .imgWrap div I add to .infoBar the images at the first position goes out of scope of .info bar and can even scroll back to it-->

<div class="table-responsive infoBar" id="infoBar">
  <div class="imgWrap"><img src="https://source.unsplash.com/user/c_v_r/1900x800"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
</div>

uj5u.com熱心網友回復：

Bootstrap 弄亂了你的 CSS，我建議你在使用它之前仔細閱讀關于每個類的檔案以及他們做了什么。

只有使用 css，您才能實作您想要做的事情（如果我理解正確的話）：

• 盡可能多的影像
• 容器中給定大小的所有影像
• 水平滾動
• 每個影像之間的空間

.infoBar {
  display: flex;
  flex-direction: row;
  max-width: 95%;
  height: 160px;
  margin: auto;
  column-gap: 25px;
  background-color: green;
  overflow-x: auto;
}

.infoBar .imgWrap {
  height: 100%;
  cursor: pointer;
}

.infoBar .imgWrap img {
  height: 100%;
  cursor: pointer;
}

<!-- the more .imgWrap div I add to .infoBar the images at the first position goes out of scope of .info bar and can even scroll back to it-->

<div class="infoBar" id="infoBar">
  <div class="imgWrap">
    <img src="https://source.unsplash.com/user/c_v_r/1900x800">
  </div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
</div>

標籤：

上一篇：按鈕和鏈接的`:focus`偽元素的樣式對觸摸設備有意義嗎？

下一篇：如何在材質ui中更改背景的影像不透明度？