Image isn't adjusting properly with div

Question

I'm having struggles trying to get my image to stretch out with my div. The width responds as expected but the height isn't reaching the bottom of the div as it expands in height as the window screen gets smaller.

HTML:

<div class="post-container">
        <div class="post-thumb">
            <img src="JKPWQF96-G01-121526-500px-650px.jpg" alt="client">
        </div>
        <div class="post-content">
            <h1>Nathan Bayne</h1><br>
            <h2>Software Developer</h2><br>
            <p>This is dummy text!</p><br>
            <p>This is dummy text!</p><br>
            <p>This is dummy text!</p>
            <a href="#" class="button instagram"><span class="gradient"></span>Full Bio</a>
            <a href="#" class="button2 instagram"><span class="gradient"></span>Contact</a>
            <div class="social-buttons">
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-youtube"></i></a>
                <a href="#"><i class="fab fa-linkedin-in"></i></a>
            </div> 
        </div>
        <div class="copyright">
            <p>© Nathan Bayne, 2020. All rights reserved.</p>
        </div>
</div>

CSS:

/*Sets colour, width, border, height and margins of the main div where the image and text are within*/
.post-container {
    background-color: #000;
    width: 70%;
    margin: 3% 15% 3% 15%;
    height: 100%;
    border: 1px solid #FFFFFF;
}

/*Makes adjustments to width of the main image (covers 35% of post-container div)*/
.post-thumb {
    width: 35%;
    height: 100%;
    float: left;
}

/*Makes adjustments to the image and allows the image to be outwith the div space to allow a higher quality image*/
.post-thumb img{
    width: 100%;
    height: 100%;
    background-size: 100%;
    object-fit: cover;
    border: solid #FFFFFF;
    border-width: 0px 1px 0px 0px;
    display: block;
}

This is what the screen currently looks like:

Answer 1

After reviewing your demo, I think it's a problem with the float layout. I strongly recommended to you use the flex layout instead of the float. Try the following code:

Html：

<div class="layout">
    <div class="post-thumb">
        <img src="xxx.jpg" alt="client">
    </div>
    <div class="post-content">
    </div>
</div>

CSS：

.layout {
  display: flex;
  flex-flow: row nowrap;
}

.post-thumb {
  flex: 1;
}

.post-content {
  flex: 2;
  font-size: 30px;
  color: white;
  margin: 5% 5% 0% 5%;
}

Right now, our layout is like this, and I think this a reasonable layout for a website.

If you want to force the image to extend to the bottom, specifying the following css(force the image box to occupy the height of Copyright):

.post-thumb {
  flex: 1;
  margin-bottom: -40px
}

But I have to say this is a workaround. The correct way is to layout the website as the following, and then the image to fill the whole left naturally.