图片在使用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的传送带内不响应

回答

相关问题