How to change the image width / height attribute of a post thumbnail?

0 Views

I’m trying to change the image width and height attribute of a single post thumbnails. Here’s the HTML tag output generate by WordPress. 

<img width="1024" height="600" src="http://www.sample.com/wp-content/uploads/2015/02/image.jpg" alt="My site" width="100%" height="" />

I want this width="1024" height="600" to become like this width="100%" height="" so the image is already responsive in all different window screen without doing CSS or JQUERY codes.

Read More

My codes below is not working correctly. The output is another width="100%" height="" /> after the src attribute instead of replacing the width="1024" height="600" before the src attribute.

The image tag output I expected is to be like this 

<img width="100%" src="http://www.sample.com/wp-content/uploads/2015/02/image.jpg" alt="My site" />

PHP CODE : 

$attr = array( 
    'class'     => '',
    'alt'       => 'My site'
    'width'     =>  '100%',
    'height'    =>  ''
);
get_the_post_thumbnail( $post->ID, 'full', $attr )

I have another way to solve this. The codes below is my second option but I also want to know how this image / height attribute change dynamically. 

$img_url= wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );

<img width="100%" src="<?php echo $img_url[0]; ?>" alt="My site" />

Any help is very appreciated.

Post Views: 0

Related posts

Leave a Reply

2 comments

  1. You can find thumbnail url & give css to that

    <?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>
<img src="<?php echo $url; ?>" class="img_thumb"/>

  2. Create custom image sizes when new images are uploaded:

    if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'thumb-400', 400, 350 ); //cropped 400 pixels wide, max 350px height
    add_image_size( 'center', 550, 367, array( 'center', 'center' ) ); //center crop
    add_image_size( 'default-thumb', 600 ); // 600 pixels wide (and unlimited height)
}

    In your template:

    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumb-400'); 
$t = $thumb[0];

    html

    <img class="thumbnail" src="<?php echo $t ?>" />