stretching an image to fit in a banner image with gimp

HTML

<h3>Original Image</h3>
<p>this is the original non-gimped image</p>
<div class='original-img'></div>
<h3>Original Image in Banner</h3>
<p>this is the original non-gimped image in the banner, you can see how it zooms to fit in</p>
<div class='banner-img'></div>
<h3>Gimp Stretched Image in Banner</h3>
<p>this is the gimped image in the banner, you can see how it should fit in the banner a bit nicer.</p>
<div class='new-banner-img'></div>

CSS

.original-img {
height:400px;
width:400px;
border:1px solid #000;
margin-bottom:20px;
background:url(https://i.imgur.com/xlYfwDD.jpg) center no-repeat;
background-size:cover;
}
.banner-img {
width:100%;
height:300px;
border:1px solid #000;
margin-bottom:20px;
background:url(https://i.imgur.com/xlYfwDD.jpg) center no-repeat;
background-size:cover;
}
.new-banner-img {
width:100%;
height:250px;
border:1px solid #000;
margin-bottom:20px;
background:url(https://i.imgur.com/MHIjv2m.jpg) center no-repeat;
background-size:cover;
}