Resize images using Bootstrap

Question

I have a 400px image for 400px, and I want to display it as if it had 200px X 200px.

What is the ideal way to do this using Bootstrap?

Answer 1

Twitter Bootstrap does not have a specific class for this.

You can use the Bootstrap grid scheme to let the image presentation rest within a suitable page context using the markup example 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 inside a block of 6 columns for small devices and 3 for medium devices. With this mark when resize in the browser or view on different screens the image will be resized according to the layout.

If still, all your images are 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 in html:

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

Answer 2

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

Answer 3

Images are not responsive by default in Bootstrap, so you must specify a class for all images you want to make responsive. It’s about the class img-responsive. By adding it, your images will begin to adapt as devices.

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

Then put here your experiences and the result acquired with the class insertion and choose the best answer. Source: http://getbootstrap.com/css/#images-Responsive

Hugs.