Wie kann ich die Größe von Bildern mit jQuery proportional ändern?

Bildproportionen mit jQuery beibehalten

Die proportionale Größenänderung von Bildern ist entscheidend, um ihre visuelle Integrität zu bewahren. jQuery bietet eine unkomplizierte Lösung zum Skalieren von Bildern unter Beibehaltung ihres Seitenverhältnisses.

So berechnen Sie proportionale Abmessungen

Die folgende Funktion bestimmt die geeignete Breite und Höhe für das skalierte Bild :

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

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

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

Diese Funktion akzeptiert die ursprünglichen Bildabmessungen (srcWidth, srcHeight) und die maximal verfügbare Breite und Höhe (maxWidth, maxHeight) als Parameter. Es berechnet das minimale Verhältnis zwischen der ursprünglichen und der maximalen Größe, um das Seitenverhältnis beizubehalten. Die neue Breite und Höhe werden dann durch Multiplikation der ursprünglichen Werte mit diesem Verhältnis ermittelt.

Anwenden der Logik mit jQuery

Sobald Sie die neuen Abmessungen berechnet haben, können Sie dies tun Verwenden Sie jQuery, um die Größe des Bildes zu ändern:

<code class="js">var newDimensions = calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight);

$("img").width(newDimensions.width);
$("img").height(newDimensions.height);</code>

Dieser Code setzt die Breiten- und Höhenattribute des ausgewählten Bildelements dynamisch auf die berechneten Werte.

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