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

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

Even simpler, you should be able to just add a generic class to the image so you can use it on multiple image sizes...

/* html */
<img src="image.jpg" alt="An image" class="fixed-size" />

/* css * /
img.fixed-size { height: auto; width: auto; }

I haven't tried it in IE but it works on Safari, FF and Chrome.

Answer 3

To add to the answer posted by @atype I would put as follows:

/* html */
<img src="image.jpg" alt="An image" class="fixed-size" />

/* css * /
img.fixed-size { height: auto !important; width: auto !important; }

Answer 4

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>

Answer 5

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