Tengo una galería de imágenes y mi problema es que el usuario puede subir imágenes de diversas proporciones. Si la imagen es muy larga de forma horizontal, mi intención es que el alto se acomode al div, y si la imagen es larga de forma vertical, que el ancho se acomode también al div, como en esta captura:
(http://thumbs.subefotos.com/dfd15cc13e643f88818535db51fa6d99o.jpg) (https://subefotos.com/ver/?dfd15cc13e643f88818535db51fa6d99o.jpg)
La imagen está por detrás, todo lo grisáseo no se debe ver. :-\
Saludos,
- La clave está en utilizar el estilo background-size: cover; esto hará que la imagen cubra todo el contenedor sin deformarse. También sugiero utilizar background-position: center; para que la imagen se mantenga centrada, de tal manera que los cortes por exceso sean equitativos tal como muestras en tu imagen.
- Lo he probado con el siguiente ejemplo (las imágenes deben estar junto al html):
<style>
#div {
width: 320px;
height: 240px;
background-color: cyan;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
<input type="file" onchange="div.style.backgroundImage='url('+this.files[0].name+')'">
<div id="div">
;-) Muchas gracias EdePC ¡funcionó perfecto!