W3Schools 幻灯片相同高度

Question

我在 w3schools 的修改后的幻灯片中添加了文本。我现在的问题是，文本 div 的高度不相等。我希望文本 div 与 3 张幻灯片中最大的文本 div 一样大，并且我不想为文本 div 设置特定高度，因为这会使响应性难以管理（意味着需要大量媒体工作查询，甚至不是 100% 完美）。我在这里浏览了很多关于同一主题的帖子，但我无法为我想出一个解决方案。代码在下方或here。感谢任何帮助。

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1;}    
  if (n < 1) {slideIndex = slides.length;}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

@import url('https://fonts.googleapis.com/css2?family=Assistant&display=swap');
@import url("https://use.typekit.net/yoj6eqg.css");

* {box-sizing: border-box}
body {
  font-family: Assistant, sans-serif;
  margin: 0;
}

/* Slideshow container */
.slideshow-container {
  display: flex;
  position: relative;
  background: #f1f1f1f1;
  width: 100%;
  margin: auto;
}

/* Slides */
.mySlides {
  display: flex;
  position: relative;
  padding: 30px 0px 30px 0px;
  text-align: center;
  width: 92%;
  max-width: 1200px;
  margin: auto;
  }
  
  /* text color */
.text {
  color: #333333;
  text-align: left;
  font-family: "Assistant", sans-serif;
  font-style: normal;
  font-weight: 400;
  padding: 1vh 0 0 0;
  flex-grow: 1;
}

.heading {
  text-align: center;
  color: #90bd49;
  font-size: 30px;
  font-family: "p22-underground", sans-serif;
  font-weight: 600;
  font-style: normal;
  padding: 10px;
  padding: 1.5vh 0 0 0;
}

/* Prev Button Position and Properties */
.prev {
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: -5.9%;
  transform: translateY(-50%); 
  padding: 30px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  user-select: none;
}

/* Next Button Position and Properties */
.next {
  position: absolute;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  top: 50%;
  right: -5.9%;
  transform: translateY(-50%);
  padding: 30px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}
.image
{
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 60vh;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.dot:hover {
  background-color: #90bd49;
}
.active {
  background-color: #90bd49;
}

@media screen and (max-width:767px) {
  .heading {
    font-size: calc(22px + 0.390625vw);
  }

  .text {
    font-size: calc(14px + 0.390625vw);
    padding: 1vh 3vw 0 3vw;
  }

  .prev {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .next {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }

  .mySlides {
    display: none;
    width: 100%;
    padding: 30px 0px 30px 0px;
  }
  .image {
    height: 350px;
  }
}

@media (min-width:768px) and (max-width:1200px) {
  .heading {
    font-size: calc(20px + 0.390625vw);
  }

  .text {
    font-size: calc(12px + 0.390625vw);
    padding: 1vh 2vw 0 2vw;
  }

  .prev {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .next {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }

  .mySlides {
    display: none;
    width: 92%;
    max-width: 1200px;
    padding: 30px 0px 30px 0px;
  }
}

@media (min-width:1201px) and (max-width:1300px) {
  .heading {
    font-size: calc(18px + 0.390625vw);
  }

  .text {
    font-size: calc(10px + 0.390625vw);
    padding: 1vh 2.5vw 0 2.5vw;
  }

  .prev {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .next {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }

  .mySlides {
    display: none;
    width: 92%;
    max-width: 1200px;
    padding: 30px 0px 30px 0px;
  }
}

@media (min-width:1301px) and (max-width:1650px) {
  .heading {
    font-size: calc(18px + 0.390625vw);
  }

  .text {
    font-size: calc(10px + 0.390625vw);
  }
}

@media (min-width: 1651px){
.heading {
  font-size: calc(16px + 0.390625vw);
}
.text {
  font-size: calc(8px + 0.390625vw);
}

}

<div class="slideshow-container">
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.</div>
</div>
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated</div>
</div>
</div>
<div class="dot-container">
<div class="dot" onclick="currentSlide(1)"></div>
<div class="dot" onclick="currentSlide(2)"></div>
<div class="dot" onclick="currentSlide(3)"></div>
</div>