Ändern Sie die Größe von Bildern für den Vollbildmodus mit Javascript?

Question

Kann man mit Javascript die Größe von Bildern so verändern, dass sie im Vollbildmodus angezeigt werden, so wie man es mit Flash kann?

Ive diesen Link gefunden, aber seine für eine ganze Plugin mit Diashow, etc. nicht nur die Funktion, die ich für eine benutzerdefinierte Design benötigen: http://buildinternet.com/project/supersized/

Und dieses Plugin scheint nur mit Hintergrundbildern zu funktionieren: http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

Idealerweise möchte ich dies mit jQuery tun. Danke

Answer 1

Hier ist ein Beispiel für eine grundlegende Implementierung. Sie berücksichtigt die Größenänderung des Fensters, aber nicht den Fokuspunkt des Bildes, so dass der Fokuspunkt bei Fenstern mit ungerader Größe aus dem Blickfeld geraten kann.

http://jsbin.com/okizi5

Edit: Ich habe vergessen, darauf hinzuweisen, dass die Attribute Breite/Höhe des Bildes in dieser Version für alle Browser (vor allem Safari) notwendig sind, um das Seitenverhältnis des Bildes zu berechnen. Wenn Ihr Bild dynamisch sein soll und die Abmessungen nicht verfügbar sind, könnten diese in der an das Fenster gebundenen Funktion "load" berechnet werden.

Answer 2

Ja. Ich wüsste nicht, warum man das nicht tun sollte. Sie können JavaScript und seine DOM-Schnittstelle verwenden, um die Stileigenschaften eines Bildes zu ändern und die Größe eines Bildes zu ändern. Sie brauchen nicht einmal eine umfangreiche Bibliothek wie jQuery; es ist alles nativ.

Answer 3

Wie wäre es damit:

$(window).resize(function() {
    $('#myImgId').width($(window).width());
    $('#myImgId').height($(window).height());
});

Es wird das Seitenverhältnis nicht beibehalten...