我遇到了一个问题。我正在尝试使用响应式图像构建一个全屏图像滑块。我尝试了所有组合:在 HTML 中添加样式高度:100%、宽度:100%、高度:自动、宽度:自动,在 CSS 中,但似乎没有任何效果。我会向您展示代码,也许我做错了什么。我无法添加代码片段,因为它们不显示图像,而且代码和类很多。这个问题让我发疯,我正在寻找 4 小时的修复程序。
HTML
<div id="showcase">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1"></div>
<div class="slide slide2 "></div>
<div class="slide slide3"></div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
CSS
#showcase,
#slider,
.slide-content {
height: 100vh;
width: 100%;
overflow-x: hidden;
}
#showcase {
position: relative;
height: 100%;
width: 100%;
}
.slide {
width: 100%;
height: 100%;
}
.slide1 {
background: url(/Core/img/lazar1.jpg) no-repeat center center/cover;
}
.slide2 {
background: url(/Core/img/lazar2.jpg) no-repeat center center/cover;
}
.slide3 {
background: url(/Core/img/lazar3.jpg) no-repeat center center/cover;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -50px;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent blue transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent blue transparent blue;
right: 0;
margin-right: 30px;
}