使用 ng2-bootstrap 的图像在轮播内没有响应

Question

有人知道为什么第一个轮播中的图像没有响应吗？以及如何让它像下面的第二个（普通 Bootstrap 版本）一样响应。第一个是使用 ng2-bootstrap

创建的

这是 html 我有：

<h1>ng2-bootstrap carousel</h1>
<carousel>
    <slide>
        <img class="first-slide" src="http://placehold.it/800x400" alt="First slide" class="center-block">
        <div class="container">
            <div class="carousel-caption">
                <h1>Example headline.</h1>
                <p>Descr1</p>
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
        </div>
    </slide>
    <slide>
        <img class="second-slide" src="http://placehold.it/800x400" alt="Second slide" class="center-block">
        <div class="container">
            <div class="carousel-caption">
                <h1>Another example headline.</h1>
                <p>Descr2.</p>
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
        </div>
    </slide>
</carousel>

<h1>Normal Bootstrap carousel</h1>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

Answer 1

事实证明，bootstrap 层次结构被 ng2 的标签破坏了。添加 img-responsive class 到 <img ..> 解决了这个问题。

仅为了完整性:

<h1>ng2-bootstrap carousel</h1>
<carousel>
    <slide>
        <img class="first-slide" src="http://placehold.it/800x400" alt="First slide" class="center-block img-responsive">
        <div class="container">
            <div class="carousel-caption">
                <h1>Example headline.</h1>
                <p>Descr1</p>
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
        </div>
    </slide>
    <slide>
        <img class="second-slide" src="http://placehold.it/800x400" alt="Second slide" class="center-block img-responsive">
        <div class="container">
            <div class="carousel-caption">
                <h1>Another example headline.</h1>
                <p>Descr2.</p>
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
        </div>
    </slide>
</carousel>

Answer 2

图片回复请加classimg-responsive或加下面代码

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

Answer 3

响应式设计的图像处理：

图像缩小

img {
width: 100%;
height: auto;
}

图像缩小但没有放大

img {
max-width: 100%;
height: auto;
}

背景保持一轴比例缩放

width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
background-image: url('img.jpg');

背景变形但适应容器

width: 100%;
height: 400px;
background-image: url('img.jpg');
background-size: cover;

使用 ng2-bootstrap 的图像在轮播内没有响应

Image is not responsive inside carousel using ng2-bootstrap

html

css

twitter-bootstrap

ng2-bootstrap

angular