Bild dehnen, um div zu füllen, aber nicht skew

Question

Ich versuche, ein Bild zu strecken, um in ein div zu passen. Ich möchte jedoch, dass es überläuft, so dass das gesamte div gefüllt ist. Das div ändert sich mit der Seite. Ich möchte einen Effekt ähnlich dem jQuery bgstretcher plugin (http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html), aber ich kann dieses Plugin nicht verwenden, da ich es bereits für das Hintergrundbild auf der Seite verwende, und es scheint nicht zu funktionieren, wenn Sie mehrere Instanzen davon versuchen und aktivieren .

Also was ich frage ist für eine Art einfache jQuery-Funktion, die ein Bild so verändert, dass ein div mit Überlauf vollständig ausgeblendet wird, so dass es keine Lücken gibt, aber ohne das Bild zu verzerren.

Edit:

http://jsfiddle.net/R7UCZ/

Das ist eine Art, was ich nach, aber ich möchte das Bild füllen das gesamte div ohne Schrägstellung. Wenn das Bild ein wenig aus dem div entfernt wird, ist das in Ordnung, aber ich brauche es, um die Größe mit dem div zu ändern, das die Höhe und Breite der Seite ändert.

Answer 1

Zuerst müssen Sie die Bildeigenschaften erhalten und sehen, welche größer ist, die Höhe oder die Breite, die Größe dann das Bild auf dem div Größe basiert, nachdem das Fenster ändert die Größe, wie folgt aus:

//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'); 
     } 

    } 

Sie kann hier eine komplette Lösung finden: http://jsfiddle.net/CDywS/1

Answer 2

können Sie einfach so tun:

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

Und wenn Ihr div-Container passt die Größe wird das Bild selbst die gesamte div zu füllen strecken.

EDIT:

Wenn Sie das Bild nicht wollen Skew:

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

Oder:

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

Je nachdem, welche Sie wollen nicht dimensionieren zu überfluten ...

Answer 3

Sie brauchen überhaupt kein JavaScript/jQuery. Verwenden Sie einfach die contain oder cover Werte für background-size:

1. background-size: contain skaliert das Bild, um es maximale Breite/Höhe ist so, dass das gesamte Bild sichtbar ist, während Seitenverhältnis beibehalten wird. (kein Überlauf)

2. background-size: cover skaliert das Bild auf seine maximale Breite, sodass das gesamte div mit dem Bild gefüllt wird, während das Seitenverhältnis beibehalten wird.(Überlauf, wenn Bild ist nicht quadratisch)

Daher müssen Sie nur diesen Code schreiben:

#myDiv { 
    background-size: contain; 
} 

Oder:

#myDiv { 
    background-size: cover; 
} 

Weitere Informationen: http://css-tricks.com/perfect-full-page-background-image/

Aktualisieren Sie: Demo

Answer 4

Die Antwort von Zee Tee ist als korrekt markiert und erfüllt die Aufgabe - allerdings nur für querformatige Bilder. Porträtbilder funktionieren nicht damit, wie Sie sehen können, wenn Sie ein solches Bild im Beispiel-Beispiel versuchen.

Sie können es jedoch schaffen, indem Sie dem Div, das das Bild enthält, eine Höhe geben. Sie können entweder einen festen Wert für diese oder eine minimale Höhe angeben, beide funktionieren.

Der Grund dafür ist, dass in der resizeMyImg Funktion, in der Zeile:

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

div.innerHeight nicht definiert ist, es sei denn die div eine Höhe oder min-height CSS-Attribut hat mit ihm verbunden ist.