come creare una sovrapposizione su una miniatura di bootstrap?

Question

Sto usando twitter bootstrap 2.1.1 con un layout reattivo e mi piacerebbe fluttuare un'etichetta nell'angolo in basso a destra dell'immagine. Uno dei problemi che sto avendo è perché è reattivo quando la miniatura è più larga dell'immagine che galleggia troppo lontano. L'altro problema è che non riesco a farlo fluttuare a destra. Dovrei anche aggiungere che, sebbene lo voglio nell'angolo in basso a destra, lo voglio sfalsato di alcuni pixel perché non è giusto sul bordo dell'immagine. Inoltre, il testo potrebbe sempre mancare di foto, ovvero solo quando viene visualizzata un'immagine predefinita.

Ecco il mio html finora

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

ed ecco il mio 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; 
}​ 

Ho anche un jsfiddle per un esempio migliore.

Forse il modo giusto per gestirlo è quello di rendere la larghezza massima del 300 del fotogruppo, ma penso che questo sia divertente su un desktop a schermo intero.

Answer 1

Ecco la mia versione del violino: http://jsfiddle.net/AdVCT/9/

In sostanza, è necessario mettere un wrapper sia l'immagine e l'etichetta, in modo che si può assolutamente posizionare l'etichetta all'interno di questo involucro:

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

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

E poi con alcuni CSS, è possibile modificare la .photo per essere centrata ma anche grande come l'immagine al suo interno (la didascalia è posizionata in modo assoluto, quindi viene effettivamente tolta dal flusso della pagina e non influenza la larghezza di genitori ecc.):

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

E rimuovere margine-sinistra: auto/margine-destra: auto dalla regola .thumbnail> a> img. Infine, per compensare l'etichetta leggermente dai lati dell'immagine, utilizzare:

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

E impostare 5px a tutto ciò che si desidera che le compensazioni siano.