Javascript 如何在响应图像和下面的元素之间创建固定的空间？

我有一个具有以下元素的响应滑块。我试过在下面的元素上使用页边顶部，在图像上使用页边底部。在这两种情况下，当视图端口减小时，图像和其他元素会分开…即间隙变大。我试过用px、vw和vh作为利润的单位。 有没有解决这个问题的方法？ 代码是：

    <div id="slider">

    <div class="container">
        <div>
            <img class="slider_img" src="images/hands-coffee-cup-apple_1920x965.jpg"/>
        </div>
        <div>
            <img class="slider_img" src="images/macbook-apple-imac-computer-39284_1920x965.jpg"/>
        </div>
        <div>
            <img class="slider_img" src="images/ipad-tablet-technology-touch_1920x965.jpg"/>
        </div>

    </div>

</div>

<div class="promises_hdr">Our promise to you</div>
<div class="promises">
    <div class="promise">
        <img class="promise_img" src="images/iconfinder_ecommerce.png"/>
        <div class="promise_hdr">Get Noticed, Get Customers</div>
        <div class="promise_txt">
            <p>The progression from the Get Noticed Online step to the Create Customer step goes through 2 other stages. These are Convert and Close. Inward Marketing: webThemes understands.</p>
        </div>
    </div>

#slider{
    width:100%;
    height: 100vh;
    position: relative;

}
.container {
    max-width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
}
.container div {
    display: inline-block;
    width: 100%;
    height: 940px;
    display: none;
}
.slider_img {
    width: 100%;
    height: auto;
    z-index: -1;
}
.promises_hdr {
    font-family: "Century Gothic", Sans-serif;
    font-size: 2.3em;
    color: #0150E2;
    position: relative;
    text-align: center;
    margin-top: 4vw;
}

$( document ).ready(function() {

     var currentIndex = 0,
      items = $('.container div'),
      itemAmt = items.length;

    function cycleItems() {
      var item = $('.container div').eq(currentIndex);
      items.hide();
      item.css('display','inline-block');
    }

    var autoSlide = setInterval(function() {
      currentIndex += 1;
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
      }
      cycleItems();
    }, 4000);

});

我们对你的承诺
引起注意，吸引顾客
从“获得在线关注”步骤到“创建客户”步骤的过程还需要经历另外两个阶段。这些是转换和关闭。内向营销：webThemes理解

#滑块{
宽度：100%；
高度：100vh；
位置：相对位置；
}
.集装箱{
最大宽度：100%；
身高：100%；
保证金：自动；
位置：绝对位置；
}
.货柜组{
显示：内联块；
宽度：100%；
高度：940px；
显示：无；
}
.滑块{
宽度：100%；
高度：自动；
z指数：-1；
}
.承诺{
字体系列：“世纪哥特式”，无衬线；
字号：2.3em；
颜色：#0150E2；
位置：相对位置；
文本对齐：居中；
利润率最高：4vw；
}
$（文档）.ready（函数（）{
var currentIndex=0，
items=$（'.container div'），
itemAmt=items.length；
函数cycleItems（）{
变量项=$（'.container div'）.eq（currentIndex）；
items.hide（）；
css（'display'，'inline-block'）；
}
var autoSlide=setInterval（函数（）{
currentIndex+=1；
如果（currentIndex>itemAmt-1）{
currentIndex=0；
}
cycleItems（）；
}, 4000);
});

也尝试使用%值作为边距。这是解决CSS中许多问题的最自信的方法，特别是在调整网站的响应性方面。

尝试使用%值作为边距。这是解决CSS中许多问题的最自信的方法，特别是在调整网站的响应能力方面。

在您的媒体查询中。在媒体查询中，您还需要降低滑块的高度。您还需要降低滑块的高度。