Question

我正在使用css缩放图像如何在缩放之后得到其高度和宽度，而不是缩放后的原始宽度和高度，而是宽度和高度。我想用jquery来做这个，以便更好地理解这是jsfiddle

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

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

Answer 1

这对我来说是一个非常有趣的问题，而且我已经学到了很多东西。

在SO和其他网站上阅读这里，屏幕上会显示一个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 - REFERENCE。它不是第三方。

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

1 个答案: