BS3 - img-responsive类 - 为什么没有最大高度？ [英] BS3 - img-responsive class - why no max height?

问题描述

bootstrap 3包括应用这些css设置的 .img-responsive class

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

display: block;
height: auto;
max-width: 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.

推荐答案

尝试这样的操作： http://bootply.com/86201 。
max-height：100％只填充视口的高度。高度：自动填充可用空间（向下滚动时也在视口下方）。
所以height：auto似乎更加一致的网格基于宽度和垂直滚动条。
在具有小宽度和高度图像的屏幕上，可以变得很小，最大高度：100％，但不起作用。

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.

固定高度和使用最大宽度：100％;和max-height：100％;为您的图片将有助于调整图像大小，并保持宽高比：
http://bootply.com/86203 这是可能的答案你正在寻找。

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.

这篇关于BS3 - img-responsive类 - 为什么没有最大高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！