html - resueltos - ¿Ajustar<div> firmemente alrededor de la imagen adjunta?

estadistica elemental solucionario

Question

La situación es que tengo un img y quiero un cuadro de título emergente cuyo ancho es el ancho del img. No puedo agregar el título como hijo de img, porque las etiquetas img no aceptan niños. Por eso mi idea era tener algo como esto:

<div>
   <img/>
   <div>
      ...caption...
   <div>
</div>

El problema es que los divs externos se expanden para llenar el ancho de sus elementos primarios, como lo hacen los elementos de bloque, y por lo tanto el subtítulo-div se vuelve igualmente ancho, y obtengo algo que se parece a esto:

Donde el div exterior se convierte en el ancho de la página, el título sigue el ancho del div exterior y por lo tanto sobresale de la imagen.

No quiero establecer manualmente el ancho del div exterior, porque estoy usando esta sub-plantilla para imágenes de todas las formas y tamaños en todo el sitio. ¿Hay alguna forma de hacer que el div exterior abraza la imagen, en lugar de llenar a su padre?

Answer 1

No quiero establecer manualmente el ancho del div exterior, porque estoy usando esta sub-plantilla para imágenes de todas las formas y tamaños en todo el sitio. ¿Hay alguna forma de hacer que el div exterior abraza la imagen, en lugar de llenar a su padre?

Necesita display: inline-block combinado con text-align: center .

Consulte: http://jsfiddle.net/thirtydot/V3XyK/

HTML:

<div class="imageContainer">
    <div>
        <img src=".." />
        <span>...caption...</span>
    </div>
</div>

CSS:

.imageContainer {
    text-align: center;
}
.imageContainer img {
    display: block;
}
.imageContainer div {
    position: relative;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1;
}
.imageContainer span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.5);
}

Answer 2

Eso es todo. A diferencia de la respuesta anterior, funcionará en IE:

<style type="text/css">
     .outerCont {height:auto;width:auto;position:relative;z-index:1;margin:0px auto;overflow:hidden;display:inline;float:left;}
     .outerCont img {height:auto;width:auto;position:relative;z-index:2;}
     .comment {height:auto;width:100%;display:block;font-family:Arial, Helvetica, sans-serif;text-align:center;padding:10px;0px;10px;0px;color:#FFF;position:absolute;z-index:3;bottom:0;/*also set your semi transparent black background-image here using the background-image property*/}
 </style> 

Lo usarías así:

<div class="outerCont">
    <img src="flower.jpg" /> <!--Or where ever the image is located -->
    <div class="comment">
        <p>Hello</p>
    </div>
</div>

El único problema que viene con las dos formas anteriores (la mía y la del otro) es que sacrificas centrando la imagen. Para centrar la imagen, tendría que crear un JavaScript con jQuery y utilizar la propiedad CSS para cambiar los anchos y las alturas de acuerdo con el contenido interno. Lo que está pidiendo es que nosotros "reducamos el tamaño" de un div a su contenido, que es solo algo que puede hacer en 3 casos especiales. Objetos flotantes, objetos Inline o Inline-Block y objetos posicionados Absolutamente. Los objetos Flotados y Absolutos no pueden centrarse sin el uso de JavaScript, y el Bloque en línea no actúa correctamente en IE, lo que significa que necesita usar display: inline; flotador izquierdo; Para que funcione como bloque en línea. Podrías centrar la imagen con JavaScript, y eso es todo. Puedo proporcionar ese código, pero solo bajo petición.

Answer 3

Tal vez simplemente haga el ancho div 1px y haga overflow: visible