Du verwendest einen Internet Explorer in einer Version kleiner gleich 8. Dieser Browser wird nicht unterstützt. Bitte aktualisiere mindestens auf Version 9.
Patrick Saar - Codes

Codes

Patrick Saar

Bilder dynamisch mit jQuery skalieren

Manchmal möchte man Bilder auch im Web gerne in maximaler Größe und Pracht auf dem Bildschirm betrachten. Aber bitte ohne Scrollen zu müssen. Und das soll dann bitte auch bei allen erdenklichen Bildschirmauflösungen so sein. Dieses Problem stellte sich mir bei der Programmierung des Vollbildmodus von PS Image Gallery.
jQuery

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

1,2 KB - Downloads: 2948

Diese Seite verwendet Cookies um die beste Nutzerfreundlichkeit zu bieten. Falls Du auf der Seite weitersurfst, stimmst Du der Cookie-Nutzung zu.
Details Ok