【问题标题】:BS3 - img-responsive class - why no max height?BS3 - img-responsive class - 为什么没有最大高度?
【发布时间】:2013-10-07 21:41:08
【问题描述】:

bootstrap 3 包含 .img-responsive 类 它应用了这些 CSS 设置

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

为什么没有max-height:100%;

我发现添加它也可以使图片在高度方面也适合,但我不确定为什么它被遗漏了,也不确定在其他浏览器中会产生什么后果。

【问题讨论】:

    标签: html css twitter-bootstrap twitter-bootstrap-3


    【解决方案1】:

    试试这样的:http://bootply.com/86201max-height:100% 只填充视口的高度。而 height:auto 填充可用空间(向下滚动时也在视口下方)。 所以 height:auto 似乎更符合基于宽度和垂直滚动条的网格。 在具有较小宽度和高度的屏幕上,图像可能会在 max-height:100% 时变小且无用。

    注意,如果你给父级一个固定的高度并使用 max-width: 100%;和最大高度:100%;为您的图像将有助于调整图像大小并保持纵横比: http://bootply.com/86203 这可能是您正在寻找的答案。

    【讨论】:

    • 明白了。就我而言,我在高度和宽度方面限制了最大空间,并且不希望图像从中出来,但是在具有相应图像比例的响应式网格系统中是有意义的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-09-26
    • 2015-01-13
    • 2018-09-20
    • 2017-11-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多