[英]HTML CSS Image Overflow issue
I am having an issue with scrollable images that shouldn't be scrollable.我遇到了不应滚动的可滚动图像的问题。 I thought that overflow: hidden;
我以为溢出:隐藏; should fix that issue, but as of yet no dice.
应该解决这个问题,但到目前为止还没有骰子。
Below is just a snippet from my code.下面只是我的代码的一个片段。 In my code, there are 4 "a" elements within the wrapper class.
在我的代码中,包装器 class 中有 4 个“a”元素。
HTML 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 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;
}
As you can see by the CSS above, the thought of overflow: hidden;通过上面的CSS可以看到溢出的思想:隐藏; was not working for me.
不适合我。 I'm fairly new to webpage design, and after looking through a lot online, the only fix that I found was overflow: hidden;
我对网页设计相当陌生,在网上浏览了很多之后,我发现唯一的解决方法是溢出:隐藏; which as stated above isn't working here.
如上所述,它在这里不起作用。
Thank you guys for the help!谢谢你们的帮助!
give your image width & height.image {height: 100vh;width: 100vw;}给你的图像宽度和高度。图像{高度:100vh;宽度:100vw;}
Found the problem, I needed to give.container a width & height发现问题,我需要给.container 一个宽度和高度
.container {
align-items: center;
display: flex;
position: relative;
width: 100%;
height: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.