ブートストラップのサムネイルでオーバーレイを作成する方法は？

Question

私はtwitter bootstrap 2.1.1を反応的なレイアウトで使用しています。画像の右下にラベルを浮かべたいと思います。私が抱えている問題の1つは、サムネイルの幅が広い場合に応答性があり、あまりにも大きく浮かぶ画像のためです。もう一つの問題は、私はそれを右に浮かせるように見えないということです。また、右端の下隅に表示したいのですが、画像の端には数ピクセルずれています。また、テキストが常に欠落している場合もあります。これは、デフォルトの画像が表示されているときだけです。ここで

は、私が良く例えばjsfiddleをも持っている私のhtmlは、これまで

<li class="span4"> 
    <div class="photo-group thumbnail"> 
    <a href="/recipes/50500235aa113eb1870001d8" class="photo-wrapper"> 
     <img alt="300x200&amp;text=photo" src="http://www.placehold.it/300x200&amp;text=Photo"> 
     <span class="label label-inverse photo-label">Photo Missing</span> 
    </a> 
    <div class="caption"> 
     <div class="pull-right"> 
     by <a href="https://stackoverflow.com/users/50494983aa113ebd5c000001"> 
    hadees 
     </a> 
     </div> 
     <a href="/recipes/50500235aa113eb1870001d8">Chocolate Crackle Cookies</a> 
    </div> 
    </div> 
</li> 

であり、ここで私のcss

.content-header { 
    padding-bottom: 10px; 
} 

.thumbnail > a > img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 100%; 
} 

.photo-group .photo-wrapper { 
    position: relative; 
} 

.photo-group .photo-wrapper .photo-label { 
    position: absolute;  
    bottom: 0; 
} 

.photo-group .photo-wrapper .photo-label { 
    float: right; 
}​ 

です。

これを処理する正しい方法は、フォトグループの最大幅を300にすることですが、それはデスクトップのフルスクリーンでは面白いと思います。ここで

Answer 1

はフィドルの私のバージョンです：http://jsfiddle.net/AdVCT/9/

は基本的に、あなたは絶対にこのラッパーの中にラベルを配置することができるように、画像とラベルの両方の周りにラッパーを配置する必要があります。

 <div class="photo"> 
      <img alt="..." src="..." /> 

      <span class="label label-inverse photo-label">Photo Missing</span> 
     </div> 

そしていくつかのCSSでは、.photoを中央に揃えるように変更することもできますが、内部の画像と同じ大きさにすることもできます（キャプションは絶対的に配置されるので、ページフローから効果的に取り除かれ、両親など）：

.photo-group .photo-wrapper .photo { 
    position: relative; 
    margin: 0 auto; 
    display: table; 
} 

そして、.thumbnail> a> imgルールからmargin-left：auto/margin-right：autoを削除します。あなたはオフセットがなりたいものは何でも

.photo-group .photo-wrapper .photo-label { 
    position: absolute;  
    bottom: 5px; 
    right: 5px; 
} 

とセット5pxの最後に、画像、使用の側面からわずかラベルを相殺します。