Resize images using Bootstrap

Twitter Bootstrap does not have a specific class for this.

You can use the Bootstrap grid scheme to make the presentation of images responsive within a suitable page context using the example tags below:

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

In this example an image marked as thumbnail is within a 6-column block for small devices and 3 for medium devices. With this mark when scaling in the browser or viewing on different screens the image will be resized according to the layout. p>

If still, all your images have 400x400 and you want to specifically force 200x200 create a new class in a specific css of your application.

In the CSS file:

.img-200-200 {
   width: 200px; // a altura se adequa proporcionalmente
}

And no html:

<img class="img-200-200" src="XXXX" />

How about using HTML5 Canvas?

HTML

<canvas id="exemploImgCanvas" width="250" height="250"/>

JavaScript

var canvas = document.getElementById('exemploImgCanvas');
var context = canvas.getContext('2d');
var testeImage = new Image();

testeImage.onload = function() {
  context.drawImage(testeImage, 0, 0, 250, 250);
};
testeImage.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';

Images are not responsive by default in Bootstrap, so you should specify one class for all the images you want to make responsive. This is the img-responsive class. By adding it, your images will begin to adapt as the devices.

It would be: <img src="minha.png" class="img-responsive" alt="" title="" />

Then put here your experiences and the result acquired with the insertion of the class and choose the best answer. Source: link

Hugs.