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

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:

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