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):
- 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):
Código (html4strict) [Seleccionar]
<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">