how to stop image responsive in twitter-bootstrap?

Question

I'm using twitter bootstrap to making responsive layout.It works like awesome.

It makes images too responsive. I need some images only need to be fixed width and height.

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"></div>

How can i make it?

Answer 1

Create a new class and set the min height and min-width equal to the width and height of the image that you don't want to shrink, and add that class to those images.

eg.

/* css */
img.no-resize {
  min-height: 40px;
  min-width: 50px;
}

/* html */

<div class="span1">
  <img class="no-resize" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40">
</div>

Answer 2

Check your code make sure that by setting image's width and height attributes like you did it's not working and there is an interference in the styling to fix:

<div class="span1">
    <img height="40" width="50" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" />
</div>

Your image is not supposed to resize with Bootstrap if you correctly fill in width and height attributes. The inlined attributes have precedence over css.

Otherwise, you have to OVERWRITE the img styling from bootstrap.css (line ~68 version 2.0.)

img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto\9;
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

Create a css selector with your specifications :

/* css */
.max-resize-50x40 {
    max-height: 40px;
    max-width: 50px;
}
.resize-50x40 {
    height: 40px;
    width: 50px;
}

Answer 3

Finally worked.

.fixed_width {
  height: 40px;
  width: 50px;
}

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" class="fixed_width" ></div>