隐藏画廊幻灯片中的额外图像

发布于 2025-01-10 22:31:14 字数 1051 浏览 0 评论 0原文

我试图部分隐藏这些图像。在此示例中，您可以看到“四”和“五”图像超出了列表，因此我需要隐藏不应该可见的部分。

这是正在发生的事情： Codepen 示例

这是我想做的：

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>

SASS 代码：

.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%;
        }
      }
    }
}

原文

I'm trying to partially hide these images. In this example you can see that the "four" and "five" images are exceeding the list so i need to hide the parts that shouldn't be visible.

Here is what is happening:
Codepen example

And here is what i'm trying to do:

HTML code:

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

SASS code:

.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%;
        }
      }
    }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦回梦里 2025-01-17 22:31:14

经过进一步调查，我可以找到一个解决方案，只需在“gallery-row”div 标签中添加 overflow: hide 即可。

回复收藏 0 原文

我还不会笑 2025-01-17 22:31:14

将隐藏的溢出添加到您的 .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_%28set_basic%29.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;
}

Add an overflow of hidden to your .gallery-row class.

.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%;
        }
      }
    }
}

Here is a simpler implementation for the same effect

<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_%28set_basic%29.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;
}

回复收藏 0 原文

彼岸花似海 2025-01-17 22:31:14

只需将此代码添加到您的 .gallery-row 中即可。

overflow : hidden

Just add this code in your .gallery-row.

overflow : hidden

回复收藏 0 原文

ヅ她的身影、若隐若现 2025-01-17 22:31:14

.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_%28set_basic%29.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>

.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_%28set_basic%29.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>

回复收藏 0 原文

~没有更多了~