Removing white space under nested img when resizing without squeezing image

I'm making a basic header using divs and a nested img in a fluid layout. I'm a bit rusty on this and i can't for the love of me figure out how to ensure that the image nested in the div scales without scaling to the point where it becomes smaller its parent div.

EDIT: Updated the codepen link showing how using min-height won't work as it squeezes the image

HTML:

<div class="container">
  <div class="item half">
    <p>
      Some text
    </p>
  </div>
  <div class="item half">
    <img src="http://dummyimage.com/hd1080" class="full-width">
  </div>
</div>

CSS:

.container{
    margin: 0 auto;
    max-width: 1920px;
}

.item{
    height: 300px;
    float:left;
    overflow: hidden;
    background-color: gray;
}

.half{
    width: 50%
}

.full-width{
    max-width: 100%;
}

And for good measure a quick illustration of what is happening:

And an illustration of what i want to happen:

Edit: Note that the image here is not being squeezed, which is what happens if you set the image to have a min-height equal to its parent div. But rather the overflow is hidden. You can also see that i do not mind the images being cropped.

Any help appreciated.

I've managed to find the solution i wanted in this thread. The function i was looking for was object-fit.

I've used the following solution:

img{
    min-height: 100%;
    object-fit: cover;
}

Edit: quickly found out that this property is only properly supported by Firefox, Chrome and Opera. Use this polyfill to fix this on Safari and IE.