Obteniendo la imagen para estirar un div

Question

¿Cómo puedo obtener una imagen para estirar el alto de una clase DIV?

Actualmente se tiene el siguiente aspecto:

http://i36.tinypic.com/34osrdg.png

Sin embargo, me gustaría que el DIV se estire para que la imagen quede bien, pero no quiero cambiar el tamaño de la imagen.

Aquí es el CSS para el DIV (el cuadro gris):

.product1 { 
    width: 100%; 
    padding: 5px; 
    margin: 0px 0px 15px -5px; 
    background: #ADA19A; 
    color: #000000; 
    min-height: 100px; 
} 

El CSS está aplicando en la imagen:

.product{ 
    display: inline; 
    float: left; 
} 

Entonces, ¿cómo puedo solucionar este problema?

Answer 1

Añadir a overflow:auto;.product1

Answer 2

display:inline 
float:left 

es su problema

flotante hace que los padres no Ancho ser estirados por el niño, trate de colocar la imagen sin el flotador. Si quita el flotador, debería darle el efecto deseado.
Otro enfoque sería asegurarse de que está borrando sus flotadores al final del elemento principal para que no alcancen el alcance.

Actualización: Después de ver su enlace Su problema de altura tal como se muestra, se debe a que las carrozas no se están limpiando.

Answer 3

En el marcado después de la imagen, inserte algo como <div style="clear:left"/>. Un poco complicado, pero es la forma más fácil que he encontrado.

Y mientras lo hace, ponga un poco de margen en esa imagen para que el texto no se tope con ella.

Answer 4

Suponiendo @ John Millikin es correcto, el código

.product + * { clear: left; } 

sería suficiente para hacer lo mismo sin forzar a ajustar manualmente el código después de la div.

Answer 5

Un truco que puede utilizar es establecer la propiedad de desbordamiento de la <div> 's que oculta. Esto obliga a los navegadores a calcular el tamaño físico de la caja y corrige el extraño problema de solapamiento con la imagen flotante. Le ahorrará agregar cualquier marcado de HTML adicional.

Así es como la clase debe ser:

.product1 { 
    width: 100%; 
    padding: 5px; 
    margin: 0px 0px 15px -5px; 
    background: #ADA19A; 
    color: #000000; 
    min-height: 100px; 
    overflow: hidden; 
} 

Answer 6

Esto se parece a un trabajo para clearfix a mí ...

Answer 7

intente lo siguiente:

.Strech 
{ 
    background:url(image.jpg); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 

    width:500px; 
    height:500px; 
}