时间戳

首页 > 解决方案 > 需要帮助缩放视口内的图像

javascript - 需要帮助缩放视口内的图像

问题描述

我有一个显示图像的 Django 站点，我需要使用按钮放大和缩小，同时保持视口相对相同的大小，并在放大时使用滚动条来移动图像。我不是 CSS 也不是 javascript家伙，所以这个尝试是基于很多谷歌的帮助。

$(document).ready(function() {
  console.log("Zoom START");
  $('#zoom-in').click(function() {
    updateZoom(0.1);
    console.log("Zoomed in");
  });

  $('#zoom-out').click(function() {
    updateZoom(-0.1);
    console.log("Zoomed out");
  });


  zoomLevel = 1;

  var updateZoom = function(zoom) {
    zoomLevel += zoom;
    $('#imageblock').css({
      zoom: zoomLevel,
      '-moz-transform': 'scale(' + zoomLevel + ')',
      /* Firefox */
      'transform': 'scale(' + zoomLevel + ')',
      //'-ms-transform': 'scale(' + zoomLevel + ')', /* IE 9 */
      '-webkit-transform': 'scale(' + zoomLevel + ')',
      /* Safari and Chrome */
      //'-o-transform': 'scale(' + zoomLevel + ')', /* Opera */

    });
    console.log("updated imageblock css");
  }
});
#imageblock {
  max-height: 600px;
  max-width: 800px;
  transform-origin: top left;
  overflow: hidden;
}

#imageblock img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Image:</label>
<div class="readonly">
  <div>
    <b>Click to tag people, Ctrl-click to tag animals</b>
    <button type="button" id="zoom-in">zoom in</button> <button type="button" id="zoom-out">zoom out</button>
  </div>
  <div id="imageblock">
    <img src="https://i.imgur.com/v38pV.jpg" id="img1" doc_id="394" style="height:600px" />
  </div>
  <div>
    <a id="rotate" href="#">Rotate 90 degrees</a>
  </div>
</div>

图像会缩放，但也会增长以填充没有任何滚动条的页面，并且不会停留在视口（图像块）内。感谢您给我的任何帮助/指导！

标记

标签： javascripthtmlcssscale

解决方案

您可能希望使用这样的方法和几个边界元素来控制剪辑和滚动。见下文：

$('input').on('change', function() {
  $('img').css('transform', `scale(${$(this).val()})`);
});
div {
  width: 300px;
  height: 300px;
  border: 1px solid #000000;
  overflow: scroll;
  display: block;
}

img {
  transform-origin: 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" step="0.1" value="1" min="0" />

<div>
  <img src="http://placekitten.com/g/250/250" />
</div>

推荐阅读