Html – BS3 – img-responsive class – why no max height

css, html, twitter-bootstrap, twitter-bootstrap-3

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.

Best Solution

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.