画像拡大

HTML
Posted at 2025-08-05
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像の拡大・縮小</title>
  <style>
    body {
      text-align: center;
      padding: 50px;
      font-family: sans-serif;
    }

    #image-container {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      overflow: auto; /* スクロール表示 */
      margin: 20px auto;
    }

    #target-image {
      display: block;
      max-width: none; /* 拡大時に制限しない */
    }

    .button-group {
      margin-top: 20px;
    }

    button {
      font-size: 20px;
      padding: 10px 20px;
      margin: 0 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1>画像の拡大・縮小（スクロール付き）</h1>

  <div class="button-group">
    <button onclick="zoomOut()">−</button>
    <button onclick="zoomIn()">＋</button>
  </div>

  <div id="image-container">
    <img id="target-image" src="IMG_4158.jpeg" alt="サンプル画像">
  </div>

  <script>
    let scale = 1;
    const minScale = 0.5;
    const maxScale = 3;
    const step = 0.1;

    const img = document.getElementById('target-image');
    const originalWidth = 600;  // 元画像の幅
    const originalHeight = 400; // 元画像の高さ（仮）

    function updateImageSize() {
      img.style.width = (originalWidth * scale) + 'px';
      img.style.height = 'auto'; // 縦横比を維持
    }

    function zoomIn() {
      if (scale < maxScale) {
        scale += step;
        scale = Math.min(scale, maxScale);
        updateImageSize();
      }
    }

    function zoomOut() {
      if (scale > minScale) {
        scale -= step;
        scale = Math.max(scale, minScale);
        updateImageSize();
      }
    }

    // 初期表示
    updateImageSize();
  </script>

</body>
</html>
You get articles that match your needs
You can efficiently read back useful information
You can use dark theme
What you can do with signing up