twitter-bootstrap BS3 - img 响应类 - 为什么没有最大高度?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19235298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
BS3 - img-responsive class - why no max height?
提问by Daniel
bootstrap 3 includes the .img-responsiveclass
which applies these css settings
bootstrap 3 包含.img-responsive应用这些 css 设置的类
display: block;
height: auto;
max-width: 100%;
why is there no max-height:100%;?
为什么没有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.
我发现添加这使得图片也适合高度,但我不确定为什么它被排除在外,也不确定其他浏览器的后果是什么。
回答by Bass Jobsen
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.
尝试这样的事情:http: //bootply.com/86201。
max-height:100%只填充视口的高度。而 height:auto 填充可用空间(向下滚动时也在视口下方)。所以 height:auto 似乎更符合基于宽度和垂直滚动条的网格。在具有小宽度和高度的屏幕上,图像可以通过 max-height:100% 变小并且没有用。
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/86203which is possible the answer you are looking for.
请注意,如果您为父级提供固定高度并使用 max-width: 100%; 和最大高度:100%;对于您的图像将有助于调整图像大小并保持纵横比:http: //bootply.com/86203这可能是您正在寻找的答案。

