The Thumbnail aspect Ratio Issue

by

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?

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*\"https://wordpress.stackexchange.com/", "", $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;
}

Leave a Comment