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):
#div {
width: 320px;
height: 240px;
background-color: cyan;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<input type="file" onchange="div.style.backgroundImage='url('+this.files[0].name+')'">
Autor
En línea
Muchas gracias EdePC ¡funcionó perfecto!
