css - img 响应不起作用

Question

我在最新版本中使用 bootstrap 3 - 3.3.4 - 不幸的是 .img-responsive 类无法正常工作。我什么都试过了，甚至 .col-md-12 和 .img-responsive 都试过了，什么都没有。

HTML:

<header class="container" id="container">
  <div class="row">
    <section class="col-md-3">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/350x150" alt="..." />
        </a>
    </section>
    <section class="col-md-9">
      <p>something else...</p>
    </section>
  </div>
</header>

CSS:

#container {
    height: 60px;
    background-color: red;
}

可以看到实时预览here .

@编辑

图像在容器上方 - 红色部分 - 这就是问题的原因，.img-responsive 应该调整图像大小以使其适合，但它没有。

Answer 1

删除height: 60px;

你只需要:

#container {    
    background-color: red;
}

图片的高度为 150 像素，但#container 的高度为 60 像素。