I have an Iframe with a Slideshow of sorts that changes the width when I adjust the size of the window, but the height stays exactly the same

I'm having issues making my iframe match the content that is inside of it, and I have tried most of the solutions that I could find for the last 4-5 hours and I still can't seem to get it to work. (Btw I'm pretty novice at web design)

This is an example of the site when the window is completely enlarged

This is an example of when the window is smaller

my parent code is`

<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>


<div class="carousel-inner">

  <div class="item active">
     <a href="https://atlus.com/p5r/lang/en/"><img src="images/Slide/P5RS.jpg" alt="Persona 5 Royal" style="width:100%;"></a>
    <div class="carousel-caption">
      <h3>Persona 5 Royal</h3>
      <p>"A living master class" -IGN</p>
    </div>
  </div>

  <div class="item">
     <a href="http://www.animal-crossing.com/new-horizons/"><img src="images/slide/ACNHS.jpg" alt="Animal Crossing New Horizons" style="width:100%;"></a>
    <div class="carousel-caption">
      <h3>Animal Crossing New Horizons</h3>
      <p>"A much-needed escape from everything" -Polygon</p>
    </div>
  </div>

  <div class="item">
     <a href="https://ffvii-remake.square-enix-games.com/en-us"><img src="Images/Slide/FFVIRB.jpg" alt="Final Final Fantasy VII Remake" style="width:150%;"></a>
    <div class="carousel-caption">
      <h3>Final Final Fantasy VII Remake</h3>
      <p>"Final Fantasy 7 Remake is a spectacle, easily one of the best-looking games I've ever played" -CNet</p>
    </div>
  </div>

</div>`

and my iframe is <iframe src="SlideShow.htm" scrolling="no" style="height:600px;width:100%;border:none;"></iframe>