爲什麼不啓動自舉卡包含圖像？

我使用的是當前引導卡從他們documentation：爲什麼不啓動自舉卡包含圖像？

<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; 
}

我也曾嘗試在其中添加引導程序image-responsive類。有沒有辦法讓這張圖片對卡片有反應，還是我必須photoshop圖片？

來源

2017-02-10 YoungCoder

嘗試給max-width:100%;到的img

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

或添加img-responsive類img標籤

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

來源

2017-02-10 05:27:53 Rahul

圖響應了我，但其他人做了沒有工作！謝謝。 – YoungCoder

很高興我能幫上忙 – Rahul

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

來源

2017-02-10 05:30:56

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

來源

2017-02-10 05:33:18

爲什麼不啓動自舉卡包含圖像？

回答

相關問題