Question

我有以下HTML：

http://via.placeholder.com/350x150

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="Zoom In" id="btnZoomIn"><i class="fa fa-search-plus"></i></a>
<a href="#" title="Zoom Out" id="btnZoomOut"><i class="fa fa-search-minus"></i></a>
<div id="canvas">
  <img src="http://via.placeholder.com/350x150" alt="" class="img-responsive" />
</div>

<script>
  $("#btnZoomIn").on("click", function() {
    var cwidth = parseInt($("#canvas img").css("width"));
    var nwidth = cwidth * 1.3;
    $("#canvas img").css("width", nwidth + "px").css("height", "auto");
  });
  $("#btnZoomOut").on("click", function() {
    var cwidth = parseInt($("#canvas img").css("width"));
    var nwidth = cwidth / 1.3;
    $("#canvas img").css("width", nwidth + "px").css("height", "auto");
  });
</script>

＆＃13;

自然宽度＆amp;图像的高度为1324 x 2041，而渲染的尺寸为650 x 1002。

按钮缩小功能完美，因为它按照代码缩小了图像的大小。但是，按钮放大不起作用。它第一次增加图像的大小，此后它不会增加图像的大小

请告知我在使用某些代码时出错了。谢谢。

按钮放大不起作用

0 个答案: