Bootstrap 2 responsive images

Question

I have inherited a website where bootstrap 2 mark up is being used but the images have a html width set like so:

<img src="text.jpg" alt="blog" width="525" height="379">

So when this page is reduced down to tablet view the images break through the column/grid structure and are not being resized.

Is there a class or something I can use to make these images responsive?

Many thanks

Answer 1

You can add the following styles to the images:

img {
  display: block;
  max-width: 100%; // Set a maximum relative to the parent
  height: auto;    // Scale the height according to the width, otherwise you get stretching
}

Or create an .img-responsive class and add to the images:

.img-responsive {
  display: block;
  max-width: 100%; // Set a maximum relative to the parent
  height: auto;    // Scale the height according to the width, otherwise you get stretching
}

This also works without removing the width and height:

<img src="text.jpg" alt="blog" width="525" height="379" class="img-responsive">