將縮略圖區域調整爲圖像和文字

Question

在我看來，我使用的是thumbnail class，但我需要完全縮小thumbnail區域以適合我的圖像和文字，我該怎麼做？這是我的代碼：

<div class="row"> 
    <div class="col-xs-6 col-md-6">    
         <a href="#" class="thumbnail thumbnailBorder" style="background-color:red"> 
          <img src="~/LIGAppsForWebsite/@item" style="height:133px; width:213px;" alt="@temp"> 
          @temp 
         </a>    
      </div> 
</div> 

這就是現在發生的事情：

而且我想獲得這樣的事情即使background-color:red爲class:thumbnail設置：

如何我這樣做？

編輯

我不想光標手柄顯示，當我徘徊紅色表面上，我只是希望它當我徘徊在圖片和文字

Answer 1

試試這個：

HTML：

<div class="row"> 
    <div class="col-xs-6 col-md-6">    
     <a href="#" class="thumbnail thumbnailBorder"> 
      <img src="~/LIGAppsForWebsite/@item" alt="@temp"> 
      <p>Image Text</p> 
     </a> 
    </div> 
</div> 

CSS：

.thumbnail { 
    width: 213px; 
    display: block; 
    margin: 0 auto; 
    padding: 0; 
} 

.thumbnail:hover { 
    background-color:red; 
} 

.thumbnail img { 
    width: 213px; 
    height: 133px; 
} 

.thumbnail p { 
    margin: 10px 0; 
    text-align: center; 
} 

演示：jsfiddle

注：HTML5 accepts nested tags在不破壞驗證

Answer 2

上面顯示

這是解決方案，只需添加display:inline-block到包含class="thumbnail"會做的標籤，display:inline-block意味着元素將只是necessary area，而不是更多...