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

时间:2017-02-10 05:20:55

标签: html css image twitter-bootstrap

我使用他们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>

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

Screenshot

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

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

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

3 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

您的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>

答案 2 :(得分:-1)

修改您的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>