在div中包含文本，该div设置为“对象适合：包含”，与屏幕尺寸无关

Question

我正在尝试在页面顶部添加一个3滑块。每个图像都是一个链接，并具有两个与之相关的文本框。一个显示在图像的顶部，另一个显示在图像的正下方的蓝色框中。我有两个问题：

1. 幻灯片必须是绝对的，因此它们都显示在同一位置。我将绝对幻灯片包裹在一个相对的div中，以为这会将其余页面放置在幻灯片之后，但是它仍然在页面后面而不是下面。我知道为什么这样做（图像的绝对位置意味着相对div没有高度），但是不知道如何在所有屏幕尺寸上添加与thr图像高度匹配的相关填充。
2. 由于将图像设置为适合对象：包含，因此图像并不总是填充屏幕的宽度，但是两个文本框会填充，这意味着它们通常不包含在图像比例中。我需要以某种方式将图像的宽度链接到文本框的宽度，以使其显示的宽度与图像的宽度完全相同。

这是我的代码。

jQuery(document).ready(function($) {
  var current = 0,
    slides = document.getElementsByClassName("feature-slide");
  copy = document.getElementsByClassName("feature-copy");

  setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
      slides[i].style.opacity = 0;
      $(slides[i]).css('pointer-events', 'none');
      copy[i].style.display = "none";
    }
    current = (current != slides.length - 1) ? current + 1 : 0;
    slides[current].style.opacity = 1;
    $(slides[current]).css('pointer-events', 'auto');
    copy[current].style.display = "block";

  }, 1000);

});

#slideshow {
  position: relative;
  max-height: 80vh;
}

.slider-image {
  position: relative;
}

img {
  object-fit: contain;
  width: 100vw;
  max-height: 80vh;
}

.feature-slide {
  position: absolute;
}

.feature-copy {
  z-index: 700;
  position: absolute;
  top: 5em;
  left: 10em;
}

.feature-text {
  background-color: #1d9cd9;
  width: 100vw;
  position: absolute;
  top: 100%;
  ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slideshow">
  <div class="feature-slide">
    <a href="#">
      <img src="https://via.placeholder.com/600x300" alt="">
    </a>
    <div class="feature-copy">
      <p>Attention Grabber 1</p>
    </div>
    <div class="feature-text">
      <p>product one</p>
    </div>
  </div>

  <div class="feature-slide">
    <a href="#">
      <img src="https://placeimg.com/600/300/tech" alt="">
    </a>
    <div class="feature-copy">
      <p>Attention Grabber 2</p>
    </div>
    <div class="feature-text">
      <p>product two</p>
    </div>
  </div>

  <div class="feature-slide">
    <a href="#">
      <img src="https://placeimg.com/600/300/arch" />
    </a>
    <div class="feature-copy">
      <p>Attention Grabber 3</p>
    </div>
    <div class="feature-text">
      <p>product three</p>
    </div>
  </div>
</div>

<div class="main-body">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat exercitationem culpa velit illo amet fugit reprehenderit fugiat animi beatae voluptatem dolorum repellat, voluptatum inventore hic maiores minima tempore facilis aliquam.
</div>