ng2-bootstrap을 사용하는 회전식 컨체인지 내부에서 이미지가 반응하지 않습니다.

Question

첫 번째 컨베이어 내부의 이미지가 왜 반응하지 않는지 알 수 있습니까? 그리고 두 번째 것 (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

이미지 처리를 추가 :

만완성도을 위해서

이미지 크기 축소 down

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;