So ändern Sie die Größe von Bildern proportional mit jQuery: Seitenverhältnis beibehalten?

Bilder proportional mit jQuery skalieren: Seitenverhältnis beibehalten

Die Größenänderungsfunktionen von jQuery sind praktisch, wenn Sie mit großen Bildern arbeiten. Um die Bildproportionen beim Skalieren beizubehalten, verwenden Sie den folgenden Ansatz:

Logik:

Die hier verwendete Funktion „calculateAspectRatioFit“ berechnet neue Abmessungen für das Bild basierend auf der gewünschten maximalen Breite und Höhe, wodurch das ursprüngliche Seitenverhältnis effektiv erhalten bleibt.

Implementierung:

<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>

Beispielverwendung:

<code class="js">// Calculate and apply new dimensions to the image
var newDimensions = calculateAspectRatioFit(originalWidth, originalHeight, maxWidth, maxHeight);
$(imageSelector).width(newDimensions.width).height(newDimensions.height);</code>

Mit dieser Methode können Bilder proportional skaliert werden, während ihre ursprüngliche Form und Proportionen erhalten bleiben.

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