[Resuelto] ¿Alguien sabe cómo puedo insertar imágenes a los divs de esta manera?

[Ororok]

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:



La imagen está por detrás, todo lo grisáseo no se debe ver.  

[EdePC]

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):

Código (html4strict) [Seleccionar] Expandir

<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">

[Ororok]

  Muchas gracias EdePC ¡funcionó perfecto!