Responsive scaling of image for the_post_thumbnail() [closed]

Question

In my functions.php file, I have:

add_theme_support( 'post-thumbnails' );
add_image_size( 'kev-feature', 650, 342, true );

In a template file, I have:

<div class="article-feature-image"><?php the_post_thumbnail('kev-feature'); ?></div>

I have a responsive design, and I want the image that should max out at 650x342 to scale down as the browser shrinks. It currently isn't doing it. I have noticed that the img html tag that is outputted has the height and width hardcoded into it, so I'm assuming that's why it's not scaling.

What am I doing wrong here?

Answer 1

This is more of a css issue than an issue with wordpress. Dimensions specified in the html img tag have a specificity of 0, so any css rules will override them. this should work:

.article-feature-image img {
    width:100%;
    max-width:650px;
    height:auto;
}

And for reference, you could use the wp_get_attachment_image_src function to get the url attribute for the featured image and construct your img tag manually without height and width attributes:

<?php $img_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'kev-feature'); ?>
<img src="<?php echo $img_url[0];?>"/>