Estirar imagen para llenar div, pero no sesgar

Question

Estoy tratando de hacer que una imagen se extienda para caber dentro de un div. Sin embargo, quiero que se desborde para que se llene todo el div. El div cambia de tamaño con la página. Quiero un efecto similar al complemento jQuery bgstretcher (http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html), pero no puedo usar ese complemento porque ya lo estoy usando para la imagen de fondo en la página, y parece que no funciona cuando intentas activar varias instancias de él .

Así que lo que estoy pidiendo es una especie de función jQuery simple que cambia el tamaño de una imagen para llenar por completo un div con desbordamiento oculto, para que no haya lagunas, pero sin sesgar la imagen.

Editar:

http://jsfiddle.net/R7UCZ/

En cierto modo es lo que busco, pero quiero la imagen para llenar todo el div y sin sesgo. Si la imagen sale un poco del div, está bien, pero necesito que cambie el tamaño del div, que cambia de tamaño con la página, tanto en altura como en ancho.

Answer 1

primer lugar usted necesita para obtener las propiedades de imagen y ver cuál es mayor, la altura o la anchura, a continuación, cambiar el tamaño de la imagen basándose en el tamaño div después de la ventana cambia de tamaño, así:

//this would load up initially, you will need this data for future processing 


    div = $("div"); 
    imgsrc = div.find('img').attr('src'); 

    var img = new Image() 
    img.onload = function(){ 
     imgw = img.width; 
     imgh = img.height; 

     //after its loaded and you got the size.. 
     //you need to call it the first time of course here and make it visible: 

     resizeMyImg(imgw,imgh); 
     div.find('img').show(); 

     //now you can use your resize function 
     $(window).resize(function(){ resizeMyImg(imgw,imgh) }); 

     } 
    img.src = imgsrc 


    function resizeMyImg(w,h){  
     //the width is larger 
     if (w > h) { 
     //resize the image to the div 
     div.find('img').width(div.innerWidth() + 'px').height('auto'); 
     }   
     else { 
     // the height is larger or the same 
     //resize the image to the div 
     div.find('img').height(div.innerHeight() + 'px').width('auto'); 
     } 

    } 

Usted en realidad puede encontrar una solución completa aquí: http://jsfiddle.net/CDywS/1

Answer 2

Usted puede simplemente hacer como esto:

<img src="your_picture.png" alt="" style="width:100%;height:100%"></img> 

Y cuando el contenedor div cambia el tamaño de la imagen va a estirarse para llenar toda la div.

EDIT:

Si no desea que la imagen para sesgar:

<img src="your_picture.png" alt="" style="width:100%"></img> 

O:

<img src="your_picture.png" alt="" style="height:100%"></img> 

En función de la dimensión que no quiere desbordarse ...

Answer 3

No necesita JavaScript/jQuery en absoluto. Sólo tiene que utilizar los contain o cover valores para background-size:

1. background-size: contain escala la imagen para que es máxima anchura/altura de modo que toda la imagen es visible preservando al mismo tiempo la relación de aspecto. (sin desbordamiento)

2. background-size: cover escala la imagen a su ancho máximo para que todo el div se llene con la imagen conservando la relación de aspecto.(Desbordamiento si la imagen no es cuadrada)

Por lo tanto, sólo tiene que escribir el código:

#myDiv { 
    background-size: contain; 
} 

O:

#myDiv { 
    background-size: cover; 
} 

Más información: http://css-tricks.com/perfect-full-page-background-image/

Actualización: Demo

Answer 4

La respuesta de Zee Tee está marcada como correcta y funciona, pero solo para imágenes orientadas al paisaje. Las imágenes de retrato no funcionan con él, como puede ver si prueba una imagen de este tipo en el ejemplo jsfiddle.

Sin embargo, puede hacerlo funcionar, dando al div que contiene la imagen una altura. Puede dar un valor fijo para esto o una altura mínima, o bien funcionará.

La razón de esto es que en la función resizeMyImg, en la línea de:

div.find('img').height(div.innerHeight() + 'px').width('auto'); 

div.innerHeight es indefinido a menos que el div tiene un atributo de altura o altura min-CSS asociada a ella.