ng2-bootstrapを使用してカルーセル内で画像が応答しない

Question

最初のカルーセル内の画像が応答しないのはなぜですか？ そして、それを下の2つ目のように反応させる方法（Normal 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

が判明し、ブートストラップ階層は、NG2さんのタグで-間で破壊します。問題を解決した<img ..>にimg-responsiveクラスを追加してください。

のみ完全のために：画像の応答を

<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

、クラスimg-responsiveを追加したり、コード

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

Answer 3

応答設計のための画像処理の下に追加してください：

画像スケールダウン

img { 
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;