无法使滑块响应答案

【问题标题】：Cannot make Slider to be responsive无法使滑块响应
【发布时间】：2019-09-19 19:36:15
【问题描述】：

我遇到了问题。我正在尝试使用响应式图像构建一个全屏图像滑块。我尝试了所有组合：添加样式高度：100％，宽度：100％，高度：自动,width:auto in HTML, in CSS 但似乎没有任何效果。我将向您展示代码，也许我做错了什么。我无法添加代码 sn-p，因为它们不显示图像，而且代码和类很多。这个问题让我发疯，我正在寻找 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;
}

【问题讨论】：

您是否尝试过分别设置100vw 和100vh 的宽度和高度？
是的，不工作。
抱歉，我想更好地了解您的页面上发生的不工作的情况，您能更具体地说明问题吗？图像不是全屏显示吗？它们出现扭曲了吗？
不，它们会出现，但页面较小时图像的大小不会改变。我尝试了所有方法使其响应，但似乎没有任何效果。我想复制 LazarAngelov 的网站.com.请到那里看看
好的。我将您的代码复制到浏览器中并使用了一些测试图像（因为我无法访问您的）。我唯一改变的是我将你的 .slide 类的单位设置为 vw 和 vh 的宽度和高度，当我调整窗口大小时，图像（对我来说）会全屏显示并适当缩放.我知道你说过你以前试过这个，但在所有的组合中，你可能都错过了。你可以试试这个，让我知道它是否有效？

标签： css image position responsive

【解决方案1】：

在“幻灯片”类中添加以下代码：

background-size: contain !important;

【讨论】：

它有效，谢谢，非常简单的解决方案。
这种技术非常适合那些希望图像居中的人。

【解决方案2】：

要解决此类问题，对于响应式设计，请使用媒体查询。被引用的页面在某些宽度断点处使用媒体查询来降低包含图像的 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;
  }
}

请注意，这些不是媒体查询的精彩示例，它们只是用于演示机制。

【讨论】：