Wie kann ich die Größe von Bildern proportional ändern und gleichzeitig das Seitenverhältnis beibehalten?

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

Die proportionale Änderung der Größe von Bildern ist eine häufige Aufgabe, mit der Sie Bilder in bestimmte Abmessungen einpassen und gleichzeitig ihr Aussehen beibehalten können 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:

<code class="javascript">$('img').css({
  'max-width': '100%',
  'max-height': '100%',
  'width': 'auto',
  'height': 'auto'
});</code>

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:

<code class="javascript">function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

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

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}</code>

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.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von Bildern proportional ändern und gleichzeitig das Seitenverhältnis beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!