BS3 - img-responsive class - why no max height?

Question

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.

Answer 1

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.