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=".jpg"
class="attachment-medium size-medium wp-post-image"
alt=""
srcset="
.jpg 300w,
.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?
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/image-300x220.jpg"
class="attachment-medium size-medium wp-post-image"
alt=""
srcset="
http://example/image-300x220.jpg 300w,
http://example/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?
Share Improve this question edited Jun 10, 2017 at 11:39 Johansson 15.4k11 gold badges44 silver badges80 bronze badges asked Jun 10, 2017 at 11:16 WordCentWordCent 1,9646 gold badges34 silver badges60 bronze badges2 Answers
Reset to default 1If 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;
}
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%;
}