HTML CSS 图像溢出问题答案

【问题标题】：HTML CSS Image Overflow issueHTML CSS 图像溢出问题
【发布时间】：2022-09-27 22:58:59
【问题描述】：

我遇到了不应滚动的可滚动图像的问题。我以为溢出：隐藏；应该解决这个问题，但到目前为止还没有骰子。

下面只是我的代码中的一个 sn-p。在我的代码中，包装类中有 4 个“a”元素。

HTML

<a href=\"Link to other page\">
  <div class=\"container\">
     <img class=\"image\" src=\"image.jpg\">
       <div class=\"overlay\"></div>
       <div class=\"overlay2\"></div>
       <div class=\"overlayText\">Title</div>
  </div>
</a>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 55vh;
  grid-auto-columns: 41vw;
  background-color: #eef7e4;
  gap: 1vh;
  padding-left: 1vh;
  padding-right: 1vh;
  overflow: hidden;
}
.container {
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.image {
  overflow: hidden;
}
.overlay {
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #e32827;
  opacity: 80%;
  transition: 0.7s ease;
  z-index: 2;
  overflow: hidden;
}
.overlay2 {
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #eef7e4;
  opacity: 80%;
  transition: 0.5s ease;
  overflow: hidden;
}
.overlayText {
  position: absolute;
  width: 50%;
  height: 100%;
  opacity: 0;
  color: #eef7e4;
  transition: 0.6s ease;
  text-align: center;
  margin-top: 50vh;
  z-index: 3;
  overflow: hidden;
}

从上面的CSS可以看出，溢出的思想：隐藏；不适合我。我对网页设计相当陌生，在网上浏览了很多之后，我发现唯一的解决方法是溢出：隐藏；如上所述，它在这里不起作用。

谢谢你们的帮助！

标签： html css image overflow

【解决方案1】：

给你的图像宽度和高度 .image {height: 100vh;width: 100vw;}

【讨论】：

那没用，它们仍然可以垂直滚动，还有其他想法吗？

【解决方案2】：

发现问题，我需要给 .container 一个宽度和高度

.container {
  align-items: center;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}

【讨论】：