Expandir imagen dentro de DIV

Question

¿Cómo puedo expandir una imagen para que tenga la misma altura que div después del cambio de tamaño? ¿O cómo puedo llenar el espacio en blanco que deja la imagen con un color?

Answer 1

creo que esto le conseguirá el resultado deseado:

<style> 
    div { 
    width:50px; 
    height:100px; 
    } 

    div img { 
    height:100%; 
    } 
</style> 
<div> 
    <img src='path/to/img.gif' /> 
</div> 

La imagen ahora se llenará hasta la altura del div contenedor y escalar su ancho, con su aspecto proporción. Esto podría causar que la imagen se expanda más allá de los límites de anchura previstos del contenedor, así que ten cuidado.

Answer 2

establecer un color de fondo para el contenedor div

Answer 3

Hay una manera de hacer esto en CSS 3:

div {background-image: url(path/to/image); background-size: 100%} 

La propiedad background-size sólo se admite en las nuevas versiones de Safari y Opera. Para los otros navegadores, se puede llenar el espacio en blanco a la izquierda alrededor de la imagen con un color utilizando la propiedad background-color, así:

div { 
    background-image: url(path/to/image); 
    background-size: 100%; 
    background-color: #000000; 
    } 

O, en forma abreviada:

div {background:#000000 url(path/to/image) no-repeat; background-size:100%} 

El uso de este código se hacer que la imagen se estire en buscadores habilitados para CSS3 (los más nuevos de Opera, Safari y posiblemente Firefox). Los navegadores antiguos e IE tendrán el espacio en blanco alrededor de la imagen llena con el color de fondo especificado.