JavaScript を使用して画像を拡大縮小し、最大幅と高さを制限するにはどうすればよいですか?

JavaScript を使用して画像を拡大縮小し、最大幅と高さを制限するにはどうすればよいですか?

現在、Web サイト上の画像はユーザーのデバイスや画面サイズに合わせて調整する必要があるため、画像にズーム機能を追加する必要があります。 JavaScript を使用すると、画像を拡大縮小したり、最大幅と高さを制限したりして、Web サイトのユーザー エクスペリエンスと視覚効果を確保できます。

まず、画像を含む HTML 要素が必要です。この例では、この要素の ID が「image」であると想定していますが、実際の状況に応じて変更できます。

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

次に、次の JavaScript コードを使用して、画像のスケーリングと最大の幅と高さの制限を実装します。

// 获取图片元素
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`;
}

上記のコード例では、最初に image 要素への参照を取得します。最大の幅と高さを設定します (例では 500px)。次に、resizeImage 関数を使用して拡大縮小率を計算し、その比率に基づいて拡大縮小された幅と高さを計算します。次に、スケールされた幅と高さが最大幅と高さを超えているかどうかを確認し、それに応じて調整します。最後に、スケーリングされた幅と高さを画像要素に適用します。

ウィンドウ サイズが変更されたときに画像をリアルタイムで拡大縮小できるようにするために、resize イベント リスナーを使用して resizeImage 関数をトリガーします。さらに、ページが読み込まれた後、DOMContentLoaded イベントを通じて画像のスケーリングも実行し、画像のサイズが初期状態で正しいことを確認します。

上記のコードを通じて、画像を拡大縮小し、最大幅と高さを制限する機能を実現できます。実際のニーズに応じて最大幅と高さ、および画像要素の ID を調整し、さまざまな Web ページ レイアウトや画像リソースに適応させることができます。

注: 画像を正常にロードできるように、サンプル コード内の画像パスを実際の状況に応じて変更する必要があります。

以上がJavaScript を使用して画像を拡大縮小し、最大幅と高さを制限するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。