Responsive Featured Images Not Working

Question

Perhaps I am misunderstanding (likely) but I am trying to use TwentySixteens method to try and make the images I upload through WordPress responsive.

I have only barely modified the code, but no matter what I try the images do not resize.

Here's what I added to my functions.php:

    function b2f_post_thumbnail_sizes( $attr, $attachment, $size ) {
       if( 'post-thumbnail' === $size ) {
        $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px';
    }
    return $attr; 
} 

add_filter( 'wp_get_attachment_image_attributes', 'b2f_post_thumbnail_sizes', 10, 3 );

I am using:

the_post_thumbnail();

in Index.php to call my image. However it is not being resized.

Any ideas as to why?

EDIT: I've added the HTML output.

<img width="1200" height="800" src="http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1200x800.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1200x800.jpg 1200w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-150x100.jpg 150w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-300x200.jpg 300w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-768x512.jpg 768w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1024x683.jpg 1024w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px">

Answer 1

It seems I forgot one crucial aspect: to edit the CSS of the img element.

I set my img to:

 img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

That fixed the issue with regards to the images not being responsive.