The Thumbnail aspect Ratio Issue

Question

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 →

<img 
    width="300" 
    height="220" 
    src="http://example.com/image-300x220.jpg" 
    class="attachment-medium size-medium wp-post-image" 
    alt="" 
    srcset="
        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?

Answer 1

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;
}

Answer 2

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

.img-responsive{
   width: 100%;
}