サムネイル領域をイメージとテキストに調整する

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> 

これは今何が起こっているかである。

そして私はclass:thumbnailためbackground-color:redが設定されている場合でも、このような何かを取得したいと思います：

どのようにすることができますが私がする？私はちょうど私が

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

画像及びテキストの上に浮かんだときに表示したい、私は赤の表面上に浮かんだときに表示されるカーソルハンドルを望んでいない

EDIT

これはdisplay:inline-blockは要素だけでnecessary areaではなくそれ以上かかるだろうことを意味し、ちょうどclass="thumbnail"はそれを行います含まれているタグにdisplay:inline-blockを追加し、ソリューションです...