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?

1 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 {

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];?>"/>
  • 1
    I guess you meant to write echo $img_url[0] ?
    – birgire
    Jul 3, 2014 at 18:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.