无法使Slider具有响应能力
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法使Slider具有响应能力相关的知识,希望对你有一定的参考价值。
我遇到了一个问题。我正在尝试用响应式图像构建一个全屏图像滑块。我尝试了所有组合:在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;
}
答案
要解决此类问题,对于响应式设计,请使用媒体查询。被引用的页面使用某些宽度断点处的媒体查询来减小包含图像的div的高度,以便允许屏幕在宽度方向上缩小,同时仍然显示具有完整宽高比的图像(因为它们是相当宽的图像) 。代码中的示例如下所示:
//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{
height:100vh;
width:100%;
}
.slide{
width:100vw;
height:100vh
}
.slide1{
background:url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar3-1920.jpg) no-repeat center center/cover;
}
@media screen and (max-width: 900px) {
.slide{
height: 80vh;
}
}
@media screen and (max-width: 700px) {
.slide{
height: 70vh;
}
}
@media screen and (max-width: 600px) {
.slide{
height: 60vh;
}
}
@media screen and (max-width: 500px) {
.slide{
height: 50vh;
}
}
@media screen and (max-width: 400px) {
.slide{
height: 40vh;
}
}
@media screen and (max-width: 300px) {
.slide{
height: 30vh;
}
}
请注意,这些不是媒体查询的壮观示例,它们只是用于演示机制。
另一答案
将以下代码添加到“幻灯片”类:
background-size: contain !important;
以上是关于无法使Slider具有响应能力的主要内容,如果未能解决你的问题,请参考以下文章