为什么没有Bootstrap卡包含图像？

Question

我使用他们documentation中的当前 Bootstrap 卡：

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="/img/drum-kit-min.png">
  <div class="card-block">
    <h4>Card title</h4>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#">Go somewhere</a>
  </div>
</div>

但是在添加我的图像时，它会溢出卡片容器，如下所示：

我尝试过更改图片的大小，但无济于事：

.card-img-to {
  width: 10px;
}

我也尝试过添加bootstrap image-responsive类。有没有办法让这张图片响应卡片，或者我是否需要对图片进行photoshop？

Answer 1

尝试将max-width:100%;提供给img

.card img{
  max-width:100%;
}

或将img-responsive类添加到img标记

<img class="img-responsive" src="yourpath/img.jpg" />

Answer 2

您的CSS类不正确。您在HTML中使用.card-img-top，在样式表中使用.card-img-to。您需要添加缺少的t。由于您控制的是父.card的宽度，因此您可以将图片设置为width:100%。

.card {
  width: 250px; /* Using this as an example, you can keep 20rem */
  overflow: hidden; /* Optional */
}
.card-img-top {
  width: 100%;
}

<div class="card">
  <img class="card-img-top" src="http://placehold.it/500x500">
  <div class="card-block">
    <h4>Card title</h4>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#">Go somewhere</a>
  </div>
</div>

Answer 3

修改您的HTML代码

 <div class="card" style="width: 100%;">
     <img class="card-img-top" src="/img/drum-kit-min.png" style="width:100%" alt="Card image cap">
     <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
 </div>

或者您可以将图片作为 .card

的背景

<强> CSS

.card {
    background-image: url("img/drum-kit-min.png");
}

<强> HTML

 <div class="card" style="width: 100%;">
     <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
 </div>