Foro de elhacker.net

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!