如何在屏幕高度適合高大的圖像（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）？

回答

相關問題