圖片在使用ng2-bootstrap的傳送帶內不響應

有人知道爲什麼第一個傳送帶內的圖像沒有響應？以及如何使它像下面的第二個（Normal Bootstrap版本）那樣響應。第一個是使用ng2-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>

來源

2017-04-01 Anand Rockzz

爲什麼你有「第一幻燈片」和「第二幻燈片」課程？我不確定這是否是您的問題，但它不是一種可擴展的方法。 –

刪除它們，仍然是同樣的問題。 reg。，可擴展 - 這只是一個**樣本**我寫的，真正的使用'* ngFor' –

原來，引導層次獲取與NG2的標籤之間打破。加入img-responsive類到<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>

來源

2017-04-02 04:23:46

對於圖像響應，請添加img-responsive類或添加以下代碼響應設計

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

來源

2017-04-02 17:41:47

圖像處理：

圖像縮小比例

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;

來源

2017-04-02 17:48:54 Sam

圖片在使用ng2-bootstrap的傳送帶內不響應

回答

相關問題