javascript - 获取缩放图像的尺寸

Question

我有一个带有以下 css 属性的盒子 div:width:400px;高度:300px；溢出:隐藏；。里面有一个图像。使用 Iscroll4，我可以缩放并移动框内的图像。工作一切正常，但使用 Jquery 如果我获取缩放图像的尺寸，该函数将始终返回 400px 的尺寸和 300px 的高度尺寸。

$('#dimpos').bind("click", function (event, ui) {
  var imgzoomed = $('#Container img');
  var position = imgzoomed.position(); /* <----------- Work Fine   */
  var dim_width = imgzoomed.css("width"); /* <----------- Don't Work but return 400px */
  var dim_height = imgzoomed.height(); /* <-----------  Don't Work but return 300px    */
  $('#gdp').text("Position (left: " + position.left + ", top: " + position.top + ") - Width: " + dim_width + "  Height: " + dim_height);
});

<小时/>

这就是问题:

当我缩放图像时，新的宽度和高度例如是宽度 500px 和高度 600px，但图像的可见部分是 div 框的尺寸(宽度 400px 和高度 300px)，所以如果我使用 Jquery 宽度() 或 css("width") 它将始终返回 400px。

Answer 1

你尝试过parseInt方法吗？这种方式应该只返回数字；

var dim_width = parseInt($('#Container img').css("width"));
var dim_height = parseInt(imgzoomed.height());

有一个例子可以向我们展示这个问题吗？