Resize images using Bootstrap

Asked

Viewed 25,078 times

3

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?

3 answers

6


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" />

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

1

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.

  • But in this way, how can I control the size of the display? It depends on the div where it is ?

  • exactly @neoprofit depends on the horizontal width of the Divs controlled by the classes col-Xs- / col-Sm- / col-Md- {1 , 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12} in its responsive layout.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.