html - 如何使高图像适合屏幕高度(Twitter Bootstrap 3)？

Question

情况很简单，但无法找到可行的解决方案。

我有一个专栏。假设.col-sm-6。 - 1.我在里面放了高(!)的图像。并使其响应。 - 2.我还在第二列放置了文本 block 。

我希望我的图像能够适应屏幕高度而不滚动。 我怎样才能做到呢？

<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我的图片有默认尺寸。

Answer 1

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

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