如何在屏幕高度适合高大的图像（Twitter Bootstrap 3）？

简单的情况，但无法找到可行的解决方案。如何在屏幕高度适合高大的图像（Twitter Bootstrap 3）？

我有一个专栏。比方说.col-sm-6。 - 1.我把高大的（！）图像放在里面。并使其响应。 - 2.我也把文本块放在第二列。

我希望我的图像适合屏幕高度而不滚动。我该怎么做？

<div class="container">

<div class="col-md-6" > 

    <img src='http://goo.gl/jqY6bj' class="img-responsive"/></img> 

</div> 

    <div class="col-md-6" > 

    <h1>HELLO WORLD!</h1> 

</div>

正如你可以在这里看到：http://www.bootply.com/T82DuMTTWU我的照片有它的默认尺寸。

来源

2014-10-26 inno.vlad

Bootstrap不会帮你。查看'''max-height''' – nathancahill 2014-10-26 17:23:26

你可以把它做成背景图片，这样它就可以完全填满div，不管方向如何... – timgavin 2014-10-26 17:26:19

Nathanchill，我需要为每个屏幕高度编写最大高度的新类？ – 2014-10-26 17:28:26

bootstrap中的img-responsive类占用父块宽度的100％并将高度设置为auto。你必须做相反的事情，你可以创建自己的高度响应类。

.height-responsive { 
    width: auto; 
    display:block; 
    height: 100%; 
}

来源

2014-10-26 18:39:42

萨门，请看http://www.bootply.com/YB5rxzMCtL#。它不适用于我的例子。 – 2014-10-26 18:45:20

如果你想让你的屏幕适合屏幕高度，所有的父母都应该适合屏幕高度放置高度：100％; – 2014-10-26 18:52:13

是这样的吗？ http://www.bootply.com/hoJftb5pHQ – 2014-10-26 18:55:11

如何在屏幕高度适合高大的图像（Twitter Bootstrap 3）？

回答

相关问题