Scalable Featured Images - Wordpress - css

Question

I'm using Bootstrap3 to create a Wordpress theme, and I am using the responsive columns like so:
<div class="col-md-4">
<div class="panel panel">
<div class="panel-heading"><h1><?php the_title(); ?></h1></div>
<div class="panel-body">
<p><?php the_post_thumbnail(); ?></p>
<p><?php the_content(__('(more...)')); ?></p>
Take a look
</div>
</div>
</div>
What I've noticed though is that the featured images are not scalable. They have set sizes, but you can't define them so that the width is 100% of, in my example, the class panel-body.
I'd like to do this as when the screen size changes, so do the size of the columns, and I'd like the image to scale with them.
Does anyone know a way of doing this, I seem to have become a bit stuck.

Answer 1

Try below code to make image scalable:
<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive img-circle'));
?>

Answer 2

You need to add class .img-responsive to make images responsive with bootstrap 3.
For adding the class .img-responsive to your wordpress images you can add the below function in your functions.php file.
<?php
//----------------------------------------------------------/
// responsive images [ 1) add img-responsive class 2) remove dimensions ]
//----------------------------------------------------------/
function bootstrap_responsive_images( $html ){
$classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link'
// check if there are already classes assigned to the anchor
if ( preg_match('/<img.*? class="/', $html) ) {
$html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html);
} else {
$html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html);
}
// remove dimensions from images,, does not need it!
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
add_filter( 'the_content','bootstrap_responsive_images',10 );
add_filter( 'post_thumbnail_html', 'bootstrap_responsive_images', 10 );
Hope it helps you.