¿Cómo puedo hacer que un div * no * se expanda para llenarlo?

Tengo un div envuelto alrededor de una imagen, de esta manera:¿Cómo puedo hacer que un div * no * se expanda para llenarlo?

<div class="containing-div"> 
     <div class="image-wrapper"> 
      <img src="image.jpg"> 
     </div> 
     <div class="unrelated-stuff"> 
      Blah blah blah. 
     </div> 
</div>

Ahora, espero image-wrapper tomar el tamaño de la imagen, y no más. Pero no es así; en su lugar se llena a la altura de containing-div. (Véase la página real aquí: http://holyworlds.org/new_hw/wallpapers.php)

Mi CSS es:

.image-wrapper{ 
    float: left; 
    box-shadow: inset 0px 4px 10px black; 
    background-image: url('image.jpg'); 
} 

.image-wrapper img{ 
    visibility: hidden; 
} 
.unrelated-stuff{ 
    float: left; 
}

Ahora, funciona igual de bien si no tengo un DOCTYPE declarado. Pero todo lo que he intentado falla si lo hago.

¿Cómo puedo hacer que image-wrapper sea del tamaño de la imagen mientras sigo usando <!doctype html>?

Fuente

2011-06-04 snostorm

Ha intentado:

.image-wrapper { 
    display: inline; 
}

.image-wrapper { 
    display: inline-block; 
}

.image-wrapper { 
    float: left; 
}

Fuente

2011-06-04 18:47:22 Jits

Sí, pero ninguno de ellos funciona. – snostorm

float no es realmente la mejor opción aquí ... inline (-block) es mucho más apropiado. –

Corrección; todos estos funcionan. Arreglan su ancho, pero por alguna razón no es altura. Mira la página, tiene flotador: queda encendido. :) – snostorm

CSS tiene que ser ...

.image-wrapper 
{ 
    width: 0; 
    height: 0; 
}

image-wrapper asumirá automáticamente el ancho y el alto de la imagen a menos que establezca la propiedad de desbordamiento para el contenedor de imágenes.

Fuente

2011-06-04 18:48:43 bdparrish

No funciona para mí, al menos no en Chrome. : P – snostorm

@snostorm intente y borre su historial y caché y vea si funciona. También podría tratar de darle a la clase '.image-wrapper' valores duros. Hazlo como '.image-wrapper {width: 600; height: 200;} 'No sé cuáles deberían ser los valores en realidad, pero esa es una alternet, pero no tan buena como un método que podrías probar. Es más fácil tenerlo auto-tamaño a lo que debería ser usando el '.image-wrapper { ancho: 0; altura: 0; } 'señaló el @bdparrish. – Jem

Me cuelgo en CSS en caché todo el tiempo. – bdparrish

¿Cómo puedo hacer que un div * no * se expanda para llenarlo?

Respuesta

Cuestiones relacionadas