为什么Bootstrap卡不包含图像？

Question

我正在使用他们文档中的当前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>