Bilder dynamisch mit jQuery skalieren

Das Bild muss also dynamisch so skaliert werden, dass es den Anzeigebereich des Browsers möglichst gut ausfüllt. Mit den CSS-Eigenschaften width und height auf 100% zerstört man natürlich zu 99% das Seitenverhältnis des Bildes und verzerrt dieses somit.

Also habe ich versucht das Ganze mit jQuery zu lösen und habe folgendes kleines Skript geschrieben. Die Methode scaleImage erwartet drei Werte. Als Erstes das Bild als jQuery-Objekt, dann die Box, in die das Bild eingepasst werden soll (bei Vollbild das Browserfenster $(window)), als jQuery-Objekt und jetzt noch ein boolscher Wert, ob kleine Bilder vergrößert werden dürfen. In der Methode selbst werden erst die Dimensionen des Bildes und der Box in lokalen Variablen gespeichert. Danach wird das Bild je nach Seitenverhältnis und mit Berücksichtigung auf den dritten übergebenen Parameter scaleSmallImagesBigger skaliert um die Box / das Browserfenster optimal auszufüllen. Zum Schluss wird das Bild noch zentriert. Die CSS-Eigenschaft position der Box muss hierzu den Wert relative haben.

Die Methode scaleImage wird hier nach dem Laden der Webseite ausgeführt. Man kann die Methode auch nachdem das Bild geladen wurde ausführen. Eine Ausführung bevor das Bild komplett geladen ist, sollte vermieden werden, denn dies führt in den WebKit-Browsern (Safari, Chrome) zu einem Fehler. Die Breite und Höhe des Bildes ist in diesem Fall 0. Das Bild kann somit nicht korrekt skaliert werden.

Des Weiteren werden die Abmessungen des Bildes bei jeder Veränderung der Browserfenstergröße neu berechnet.

// -------------------------------------------------------------------
// ------------- Autor: Patrick Saar - www.patrick-saar.de -----------
// ---------------- jQuery Bilder skalieren v. 1.0 -------------------
// ------------------ Copyright 2012 Patrick Saar --------------------
// -------------------------------------------------------------------

function scaleImage(image, box, scaleSmallImagesBigger) {
    // Dimensionen des Bildes und der Box lokal speichern
    var imageWidth = image.width();
    var imageHeight = image.height();
    var boxWidth = box.width();
    var boxHeight = box.height();

    // Je nach Seitenverhaeltnis des Bildes skalieren
    if (imageWidth / boxWidth < imageHeight / boxHeight) {
        if (imageHeight >= boxHeight || scaleSmallImagesBigger === true) {
            // Bild skalieren
            image.css({ 'width': imageWidth * (boxHeight / imageHeight), 'height': boxHeight });
        }
    }
    else {
        if (imageWidth >= boxWidth || scaleSmallImagesBigger === true) {
            // Bild skalieren
            image.css({ 'width': boxWidth, 'height': imageHeight * (boxWidth / imageWidth) });
        }
    }
    // Bild in Box zentrieren
    image.css({ 
        'position': 'absolute',
        'top': '50%',
        'left': '50%',
        'margin-left': -(parseInt(image.css('width')) / 2),
        'margin-top': -(parseInt(image.css('height')) / 2)
     });
}

// Bild skalieren, nachdem die Webseite und viel wichtiger das entsprechende Bild geladen wurde.
$(window).load(function() {
    scaleImage($('#img'), $(window), true);
});

// Bild bei Veraenderung der Browserfenstergroesse erneut skalieren
$(window).resize(function() {
    scaleImage($('#img'), $(window), true);
});