cómo hacer una superposición sobre una miniatura de bootstrap?

Question

Estoy usando twitter bootstrap 2.1.1 con un diseño receptivo y me gustaría hacer flotar una etiqueta en la esquina inferior derecha de la imagen. Uno de los problemas que tengo es porque es receptivo cuando la miniatura es más ancha que la imagen que flota demasiado. El otro problema es que no puedo hacer que flote hacia la derecha. También debo agregar que, aunque lo quiero en la esquina inferior derecha, quiero que se desplace unos píxeles para que no esté en el borde de la imagen. También es posible que el texto siempre sea una foto faltante, es decir, cuando se muestra una imagen predeterminada.

Aquí es mi html hasta ahora

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

y aquí está mi 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; 
}​ 

También tengo un jsfiddle para un mejor ejemplo.

Quizás la forma correcta de manejar esto sea simplemente hacer que el ancho máximo del fotogrupo sea 300 pero creo que se ve muy bien en una pantalla de escritorio completa.

Answer 1

aquí está mi versión del violín: http://jsfiddle.net/AdVCT/9/

Esencialmente, hay que poner una envoltura alrededor de la imagen y la etiqueta, por lo que se puede colocar de manera absoluta la etiqueta dentro de este envoltorio:

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

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

Y luego, con algunos CSS, puede modificar el .photo para que se centre, pero también solo tan grande como la imagen que contiene (el título está completamente posicionado, por lo que se saca efectivamente del flujo de la página y no afecta el ancho de padres, etc.):

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

Y quite margin-left: auto/margin-right: auto desde .thumbnail> a> regla img. Por último, para compensar la etiqueta ligeramente de los lados de la imagen, utilice:

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

Y establecer 5px a lo que usted desea que los desplazamientos sean.