how to have full width picture zoom in

Question

On my wordpress posts I added the post thumbnail at the top of the page to be full width. It works correctly, except the picture always stays the same size, it never crops. So if the screen is big the picture is stretched so much that it looks distorted. I want the thumbnail to crop as the screen gets bigger, so the image will always look good and clear. (similar to this https://www.inthefrow.com/2016/10/3-amazing-places-eat-mykonos.html) I've tried adding true, however that doesn't work. Does anyone have any solutions? Thanks in advance.

<div class="banner-image"><?php the_post_thumbnail( array( 5555, 2222, true ) ); ?></div>

css

.banner-image img {
    max-width: 100%;
    width:100%;
    height:700px;
}

Answer 1

edit:

replace this:

 <div class="banner-image"><?php the_post_thumbnail( array( 5555, 2222, true ) ); ?></div>

to this:

 <div class="banner-image"></div>

then make sure that you set some height in: .banner-image class

then go to your header.php (or where is the header template of yours) and just before the 'head' closed put this:

<style>
    .post .banner-img {
        background-image: url('<?php echo the_post_thumbnail_url() ?>');
        background-size: cover;
        width: 100%;
        height: // what ever you choose
    }
</style>

make sure the you change the function

the_post_thumbnail()
// with
the_post_thumbnail_url()

in this case it will work dynamicly for each post ther is a diffrent thumbnail