6

bootstrap 3 includes the .img-responsive class which applies these css settings

display: block;
height: auto;
max-width: 100%;

why is there no max-height:100%;?

I found adding this makes the pictures fit in terms of height as-well, but I'm not sure why it's being left out and not sure what the consequences are across other browsers.

Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
Daniel
  • 34,125
  • 17
  • 102
  • 150

1 Answers1

7

Try something like this: http://bootply.com/86201. max-height:100% only fills the height of the viewport. While height:auto fills the available space (also below the viewport when scrolling down). So height:auto seems more consistent with the grid based on width and a vertical scrollbar. On a screen with small width and height images can became small with max-height:100% and not useful.

Note in the case you give the parent a fixed height and using max-width: 100%; and max-height:100%; for your images will help to resize the image and keep the aspect ratio: http://bootply.com/86203 which is possible the answer you are looking for.

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • 1
    gotcha. in my case I'm limiting the max space in terms of height and width, and don't want the image to come out of it, but in the responsive grid system having the image scale accordingly makes sense. – Daniel Oct 08 '13 at 23:49