Automatische Bildgrößen mit jQuery

Manchmal möchte ich ja gerne meine Bilder auch in schön groß präsentieren, damit sie richtig wirken. Dummerweise haben nicht alle Menschen Displays mit mindestens 24"-Format. So muss man ein wenig gucken, dass sich der liebe Benutzer nicht tot scrollt oder das Bild gar nicht in seiner Gesamtheit anschauen kann.

Deshalb habe ich mal ein wenig in die jQuery-Trickkiste gegriffen und ein kleines Stück Code geschrieben, dass es mir erlaubt die Bilder in möglichst großer Größe einzubinden. Es wird dann automatisch so skaliert, dass es sich in die Browsergröße des Besuchers schön einpasst und zentriert dargestellt. Nachteil daran: Die Dateigröße schiesst natürlich in die Höhe, was bezüglich der Ladezeiten auch nicht so richtig Spaß macht. Damit das nicht überhand nimmt, habe ich die Maximalhöhe der Bilder auf 900 Pixel beschränkt. Ich denke das reicht völlig aus.

Eine alternative Lösung wäre sicherlich die Implementierung mit CSS-Mediaqueries, die allerdings wohl nicht so wunderbar dynamisch ausfallen würde. Da gefällt mir diese Variante wesentlich besser. Um das Javascript-Gedöns auf ein Bild anzuwenden, muss ich in Zukunft daran denken die Klasse size-full (auf die springt das leider inkompatible Bildbeschriftungs-Skript an) im Quelltext zu entfernen und statt dessen resizable hinzuzufügen.

Jetzt müsste ich nur mal wieder losziehen und auch ein paar Bilder machen. Irgendwie habe ich da auch Lust zu, schließlich scheint das Wetter ja auch wieder besser zu werden.

Und schließlich, für Menschen die es wirklich interessiert, hier noch der Code mit einigen Kommentaren. Der sollte nicht all zu schwer zu verstehen sein.

function resizeNow(isLoad){
		$('.single .resizable').each(function() {
			
			/* 	Liest die aktuelle Höhe und 
				Breite des Bildes aus */
			var thisheight = $(this).attr('height');
			var thiswidth = $(this).attr('width');
			
			/* 	Beim Laden der Seite wird das Seitenverhältnis
				des Bildes bestimmt und im img-Tag gespeichert */
			if (isLoad == 'load') {
				var ratio = thiswidth / thisheight;
				$(this).attr('ratio', ratio);
			}
			
			/* 	Die aktuelle Höhe und Breite
				des Fensters wird bestimmt */
			var windowheight = $(window).height();
			var windowwidth = $(window).width();
			
			/* 	Die neue Höhe des Bildes wird gesetzt
				und aus dem Verhältnis die Breite berechnet */
			var newheight = windowheight - 75;
			if ( newheight > 900 ) { newheight = 900; }
			var newwidth = newheight * $(this).attr('ratio');
			
			/* 	Wenn die neue Breite des Bildes kleiner ist als die
				Fensterbreite des Browsers, wird diese
				an das Bild übergeben */
			if (newwidth < windowwidth) {
				$(this).attr('height', newheight);
				$(this).attr('width', newwidth);
			} else {
				/* 	ansonsten wird basierend auf der Breite eine neue
					Bildgröße bestimmt und diese an das Bild übergeben */
				newwidth = windowwidth - 75;	
				newheight = newwidth / $(this).attr('ratio');
				$(this).attr('height', newheight);
				$(this).attr('width', newwidth);
			}

			/* 	Schließlich wird das Bild noch zentriert ausgerichtet.
				Der Code geht dabei von einer Breite von 700px
				für den Content-Bereich aus */
			var marginleft = ((newwidth / 2) * (-1) + 350);
			$(this).css('margin-left', marginleft);
		});
	}

Wie man sieht, kann der Funktion eine Variable übergeben werden. Beim Laden der Seite wird die Funktion initial ausgeführt, das Seitenverhältnis bestimmt und gespeichert und das Bild erstmalig eingepasst. Bei jedem Vergrößern oder Verkleinern des Browserfensters wird die Funktion dann ohne Parameter aufgerufen.

/*	Die Funktion resizeNow wird beim Laden
		der Seite mit dem Parameter 'load' aufgerufen,
		damit das Seitenverhältnis bestimmt wird */
	resizeNow('load');
	
	/*	Bei einer Größenänderung des Browserfensters
		wird die Funktion ohne Parameter ausgeführt */
	$(window).resize(function() {
		resizeNow('');		
	});

Vielleicht kann der ein oder andere ja was mit dem Skript anfangen. Bei Fragen und Anregungen freue ich mich über Kommentare. Ich weiß das mein gecode hier weit davon entfernt ist, perfekt zu sein und deshalb bin ich für jeden Verbesserungsvorschlag dankbar.

Nachtrag: Bilder auf den Übersichtsseiten normal groß anzeigen

Irgendwie störte es mich, dass auf den Übersichtsseiten die Bilder so groß angezeigt wurden. Deshalb habe ich die Funktion resizeNow() noch um folgende Zeilen erweitert. Nun werden die Bilder auf den Übersichtsseiten schön passend im Textfluss ausgegeben und erst auf den Einzelseiten der Einträge im Großformat. Damit das klappt, musste ich in Zeile 2 des Codes oben noch ein .single hinzufügen.

/* Auf den Übersichtsseiten werden die
		Bilder auf 700px skaliert. */
		$('.home .resizable').each(function() {

			var thisheight = $(this).attr('height');
			var thiswidth = $(this).attr('width');

			if (isLoad == 'load') {
				/* Achtung! Hier wird das Seitenverhältnis andersherum
				berechnet, da die Breite des Bildes ausschlaggebend ist. **/
				var ratio = thisheight / thiswidth;
				$(this).attr('ratio', ratio);
			}
			
			$(this).attr('width', '700');
			var newheight = 700 * $(this).attr('ratio');


			$(this).attr('height', newheight);
			
		});