figcaption - img shadow css

Obteniendo imagen para estirar un div

Question

¿Cómo puedo obtener una imagen para estirar la altura de una clase DIV ?

Actualmente se ve así:

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

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

Aquí está el CSS para el DIV (el recuadro gris):

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

El CSS aplicado a la imagen:

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

Entonces, ¿cómo puedo solucionar esto?

Answer 1

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, coloque un poco de margen en esa imagen para que el texto no se tope con ella.

Answer 2

Suponiendo que @John Millikin es correcto, el código

.product + * { clear: left; }

bastaría con hacer lo mismo sin forzarle a ajustar manualmente el código después del div.

Answer 3

Un truco que puede usar es establecer la propiedad de desbordamiento del <div> como 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 debe verse la clase:

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

Answer 4

display:inline  
float:left  

es tu problema

Flotar hace que el ancho de los padres no sea estirado por el niño, intente colocar la imagen sin el flotador. Si quita el flotador, debería darle el efecto deseado.
Otro enfoque sería asegurarse de que está limpiando 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 como se muestra, se debe a que las carrozas no se están limpiando.

Answer 5

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

Answer 6

Agregar overflow:auto; para .product1

Answer 7

Pruebe lo siguiente:

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

    width:500px;
    height:500px;
}