Wie verwende ich JavaScript, um Bilder zu skalieren und die maximale Breite und Höhe zu begrenzen?

Wie verwende ich JavaScript, um Bilder zu skalieren und die maximale Breite und Höhe zu begrenzen?

Heutzutage müssen Bilder auf Websites normalerweise an das Gerät und die Bildschirmgröße des Benutzers angepasst werden. Daher ist es notwendig, den Bildern eine Zoomfunktion hinzuzufügen. Mithilfe von JavaScript können wir das Bild skalieren und seine maximale Breite und Höhe begrenzen, um das Benutzererlebnis und die visuelle Wirkung der Website sicherzustellen.

Zunächst benötigen wir ein HTML-Element, das ein Bild enthält. Im Beispiel gehen wir davon aus, dass die ID dieses Elements „Bild“ ist und entsprechend der tatsächlichen Situation geändert werden kann.

<img id="image" src="path/to/your/image.jpg" />

Als nächstes können wir den folgenden JavaScript-Code verwenden, um die Bildskalierung und maximale Breiten- und Höhenbeschränkungen zu implementieren:

// 获取图片元素
const image = document.getElementById("image");

// 设置最大宽高
const maxWidth = 500;
const maxHeight = 500;

// 监听窗口大小改变事件
window.addEventListener("resize", resizeImage);

// 页面加载完成后执行一次图片缩放
window.addEventListener("DOMContentLoaded", resizeImage);

// 图片缩放函数
function resizeImage() {
  // 获取视口宽度和高度
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

  // 计算缩放比例
  const widthRatio = viewportWidth / image.naturalWidth;
  const heightRatio = viewportHeight / image.naturalHeight;
  const scale = Math.min(widthRatio, heightRatio);

  // 计算缩放后的宽度和高度
  let newWidth = image.naturalWidth * scale;
  let newHeight = image.naturalHeight * scale;

  // 检查是否超过最大宽度和最大高度
  if (newWidth > maxWidth) {
    const ratio = maxWidth / newWidth;
    newWidth *= ratio;
    newHeight *= ratio;
  }

  if (newHeight > maxHeight) {
    const ratio = maxHeight / newHeight;
    newWidth *= ratio;
    newHeight *= ratio;
  }

  // 应用缩放后的宽度和高度
  image.style.width = `${newWidth}px`;
  image.style.height = `${newHeight}px`;
}

Im obigen Beispielcode erhalten wir zunächst den Verweis auf das Bildelement und legen die maximale Breite und Höhe (500 Pixel) fest im Beispiel). Anschließend verwenden wir die Funktion resizeImage, um das Skalierungsverhältnis zu berechnen und die skalierte Breite und Höhe basierend auf dem Verhältnis zu berechnen. Als nächstes prüfen wir, ob die skalierte Breite und Höhe die maximale Breite und Höhe überschreitet, und passen sie entsprechend an. Abschließend wenden wir die skalierte Breite und Höhe auf das Bildelement an. resizeImage 函数来计算缩放比例，并根据比例计算出缩放后的宽度和高度。接下来，我们检查缩放后的宽度和高度是否超过最大宽高，并进行相应的调整。最后，我们将缩放后的宽度和高度应用到图片元素上。

为了让图片在窗口大小改变时实时进行缩放，我们使用 resize 事件监听器来触发 resizeImage 函数。另外，在页面加载完成后，我们还通过 DOMContentLoaded

Damit das Bild in Echtzeit skaliert werden kann, wenn sich die Fenstergröße ändert, verwenden wir den Ereignis-Listener resize, um die Funktion resizeImage auszulösen. Darüber hinaus führen wir nach dem Laden der Seite auch eine Bildskalierung durch das Ereignis DOMContentLoaded durch, um sicherzustellen, dass die Größe des Bildes im Ausgangszustand korrekt ist.

Mit dem obigen Code können wir die Funktion der Skalierung des Bildes und der Begrenzung der maximalen Breite und Höhe realisieren. Sie können die maximale Breite und Höhe sowie die ID des Bildelements entsprechend den tatsächlichen Anforderungen anpassen, um sie an verschiedene Webseitenlayouts und Bildressourcen anzupassen.

Hinweis: Der Bildpfad im Beispielcode muss entsprechend der tatsächlichen Situation geändert werden, um sicherzustellen, dass das Bild normal geladen werden kann. 🎜

Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um Bilder zu skalieren und die maximale Breite und Höhe zu begrenzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!