缩放后获取图像的宽度和高度

Question

我正在使用CSS缩放图像，如何获取缩放后的高度和宽度而不是原始宽度和高度？我想使用jQuery来实现这一点。更好地理解，请参考jsfiddle。

$("#b1").click(function(){
      $('#dragable').css('transform','scale(2.12)');
});

$('#b2').click(function(){
    $obj = $('#dragable');
   alert($obj.width() + "  " + $obj.height());
});

- user3316523

Answer 1

对我来说，这实际上是一个非常有趣的问题，我也学到了很多。

在Stack Overflow和其他网站上阅读时，CSS转换显示在您的屏幕上，但不在DOM中（如：before、after）。因此，您必须使用一个名为.getBoundingClientRect()的巧妙JavaScript命令-它将读取尺寸。

这里有一个带有示例的FIDDLE。

这是JS:

JS

$('.beforeclick').append('height: ' + $('#b1').height() + ' width: ' + $('#b1').width() ); 
$("#b1").click(function(){
        $('#b1').css('transform','scale(0.5)');
        var mywidth =  $("#b1")[0].getBoundingClientRect().width;
        var myheight = $("#b1")[0].getBoundingClientRect().height;
        $('.afterclick').append('height: ' + myheight + ' width: ' + mywidth );
});

PS - .getBoundingClientRect()是原生JS，支持大多数浏览器-参考资料。它不是第三方的。

- TimSPQR

---

请提供 Fiddle 链接。 - user3316523

我尝试使用getBoundingClientRect()方法，但它显示未定义。这是第三方方法吗？ - user3316523

抱歉，我刚刚添加了fiddle链接。 - TimSPQR

注意 - getBoundingClientRect() 的值受 CSS 过渡的影响。如果报告的值不正确，请检查元素是否应用了某些 CSS 过渡并禁用它们。 - userlond