Ensuring responsive image and div are the same size

HTML-CSS
1

Hi, everyone. I already asked this question on Stackoverflow, but I wasn’t able to get any assistance. Is there anyone that could help me?

I’m trying to make a design that utilizes white space.

I have an image that I want on a white background. I have a class that has a white background, and the image itself (which also has a white background as part of the image). I’m having an issue where I can’t ensure that the div class is the same height as the image itself if I have both be responsive.

I’ve tried adding a second image with the same height as the initial image that is just white space, setting the div to be responsive, and a bunch of other things, but I’m not sure what the best way to do this would be. The page itself is up at http://jamieaurora.com/devinTribute.html to get an idea of what I’m going for (though the code is a bit out of date than what I’m posting here). If anyone could point me in the right direction, it’d be greatly appreciated. I cut out the portions of the code that I don’t feel are relevant, but if you would like to take a look at the full HTML file, it is located in this hastebin. Thank you so much!

https://hastebin.com/tifiqaciri.xml

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.responsive
{
  width: 100%;
  height: auto;
}
.hero-section
{
  background-color: white;
  font-family: Oswald;
  letter-spacing: 4px;
  top: 0;
  height: 64%;
  width: auto;
  padding-top: 5%;
  padding-bottom: 1%;
}
</style>
<body>
<nav>
<ul id='navbar' style="z-index:0;">
<li><a class = "active" href="index.html">Home</a></li>
</ul>
</nav>
<section class="hero-section" id="hero-section">
  <div class = "container-fluid">
    <div class = "row">
      <div class="col-xs-6">
        <img src = "images/devin-townsend-evermore.jpg" class="responsive" ></img>
      </div>
      <div class="col-xs-6">
        <h1 style="padding-left: 62%" class="responsive">Title Text</h1>
        <h2 style = "padding-left: 60%; font-size: 140%; align: left;" class="responsive">Paragraph Text</h2>
      </div>

      </div>

    </div>


  </section>```