So ändern Sie die Größe von Bildern proportional

Das proportionale Ändern der Größe von Bildern ist eine häufige Aufgabe, die verwendet werden kann, um Bilder in bestimmte Abmessungen einzupassen und gleichzeitig ihr Aussehen beizubehalten Verhältnis. Dies ist besonders nützlich, wenn Sie mit Bildern unterschiedlicher Größe arbeiten, die konsistent angezeigt werden müssen.

Um die Größe eines Bildes mithilfe von jQuery proportional zu ändern, können Sie den folgenden Code verwenden:

$('img').css({
  'max-width': '100%',
  'max-height': '100%',
  'width': 'auto',
  'height': 'auto'
});

Dieser Code legt die maximale Breite und Höhe des Bildes auf 100 % fest, wodurch das Bild proportional skaliert werden kann, um in diese Abmessungen zu passen. Die Eigenschaften „width“ und „height“ werden auf „auto“ gesetzt, um das ursprüngliche Seitenverhältnis beizubehalten.

Eine andere Methode zum Berechnen der geeigneten Abmessungen für ein Bild unter Beibehaltung seines Seitenverhältnisses ist die Verwendung von berechneAspectRatioFit() Funktion:

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}

Diese Funktion verwendet die ursprüngliche Breite und Höhe des Bildes zusammen mit der maximal verfügbaren Breite und Höhe und berechnet die neue Breite und Höhe, die das Seitenverhältnis innerhalb der angegebenen Grenzen hält.