0

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?

closed as off-topic by Michael, s_ha_dum Mar 7 '14 at 22:16

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

2

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

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