在畫廊幻燈片中隱藏額外的影像

我試圖部分隱藏這些影像。在此示例中，您可以看到“四個”和“五個”影像超出了串列，因此我需要隱藏不應該看到的部分。

這是正在發生的事情：

HTML 代碼：

<div class="gallery-row">
  <ul class="list">
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
    </div>
    //and four more images below
  </ul>
</div>

薩斯代碼：

.gallery-row {
  width: 800px;
  background-color: blue;
  .list {
      display: flex;
      gap: 20px;
      list-style: none;
      width: 100%;
      .list__item {
        min-width: 220px;
        height: 220px;
        .list__thumbnail {
          width: 100%;
          height: 100%;
        }
      }
    }
}

uj5u.com熱心網友回復：

經過進一步調查，我可以找到一個解決方案，只需添加overflow: hidden“gallery-row”div 標簽。

uj5u.com熱心網友回復：

.gallery-row在您的班級中添加隱藏的溢位。

.gallery-row {
  width: 800px;
  background-color: blue;
  overflow: hidden;
  .list {
      display: flex;
      gap: 20px;
      list-style: none;
      width: 100%;
      .list__item {
        min-width: 220px;
        height: 220px;
        .list__thumbnail {
          width: 100%;
          height: 100%;
        }
      }
    }
}

這是相同效果的更簡單實作

<div class="row">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Icon_2_(set_basic).png"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/NYCS-bull-trans-4-red.svg/2048px-NYCS-bull-trans-4-red.svg.png"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Channel_5_logo_2011.svg/1024px-Channel_5_logo_2011.svg.png">
</div>

.row {
  width: 800px;
  background-color: blue;
  display: flex;
  gap: 1.25rem;
  overflow: hidden;
}

.row img {
  min-width: 220px;
  height: 220px;
}

uj5u.com熱心網友回復：

只需將此代碼添加到您的 .gallery-row 中。

overflow : hidden

uj5u.com熱心網友回復：

.gallery-row {
  width: 800px;
  background-color: blue;
  overflow: hidden;
  .list {
      display: flex;
      gap: 20px;
      list-style: none;
      width: 100%;
      .list__item {
        min-width: 220px;
        height: 220px;
        .list__thumbnail {
          width: 100%;
          height: 100%;
        }
      }
    }
}

<div class="gallery-row">
  <ul class="list">
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/NYCS-bull-trans-1.svg/1024px-NYCS-bull-trans-1.svg.png">
    </div>
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Icon_2_(set_basic).png"> 
    </div>
    <div class="list__item">
      <img class="list__thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/NYCS-bull-trans-3.svg/1200px-NYCS-bull-trans-3.svg.png"> 
    </div>
    <div class="list__item">
      <img class="list__thumbnail" style="visibility: hidden;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/NYCS-bull-trans-4-red.svg/2048px-NYCS-bull-trans-4-red.svg.png">  
    </div>
    <div class="list__item">
      <img class="list__thumbnail" style="visibility: hidden;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Channel_5_logo_2011.svg/1024px-Channel_5_logo_2011.svg.png"> 
    </div>
  </ul>
</div>

標籤：html css 图片 旋转木马 画廊

上一篇：將人員分配到組中以使他們盡可能少地見面

下一篇：像素格式位位元組序