I have used thumbnail like this in my wordpress theme's one template →

<?php the_post_thumbnail( 'medium' ); ?>

In the browser it is rendering like this →

    class="attachment-medium size-medium wp-post-image" 
        http://example.com/image-300x220.jpg 300w, 
        http://example.com/image.jpg 640w" 
    sizes="(max-width: 300px) 100vw, 300px"

My first question is how to put height = auto is there any function that can help us to achieve this? such as responsive-img

In short, I am asking should I control the width through the CSS or WordPress gives some function to do this?

2 Answers 2


If you want to remove the height value from your img URL, you can use this function:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_height', 10, 5 );
function remove_thumbnail_height( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $html = preg_replace( '/height=\"\d*\"/', "", $html );
    return $html;

This will replace the height with an empty value. Note that you can't use Auto as a value for the height property. It won't be validated by w3 validator. However, you can set the height to auto in your CSS:

.wp-post-image {
    height: auto;
  • 1
    @TheWPNovice You're welcome. You can always try the answer and accept it ONLY if it solved your problem.
    – Johansson
    Jun 10, 2017 at 11:42
  • 1
    My atom(editor) is hanged I need to restart the machine(desktop). I will get back to you ASAP. thanks for your help sir. Thanks for editing the question correctly. You are a very knowledgeable person.
    – WordCent
    Jun 10, 2017 at 11:49
  • 1
    @TheWPNovice You are welcome. Just sharing what i know, which isn't much. take your time.
    – Johansson
    Jun 10, 2017 at 11:50
  • 1
    @TheWPNovice You are welcome, as always.
    – Johansson
    Jun 10, 2017 at 15:31

You can use something like this,

you can use second parameter as an array of attributes as

the_post_thumbnail('medium', ['class' => 'img-responsive', 'alt' => get_the_title()]);

If you are not using bootstrap framework, in style sheet put

   width: 100%;
  • 1
    Please note, this will drop the srcset, which will remove the responsiveness from the image.
    – Johansson
    Jun 10, 2017 at 11:41
  • 1
    Thanks for pointing out the issue. I changed the code it should work fine what do you say. Jun 10, 2017 at 12:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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