缩放后获取图像的宽度和高度 [英] get width and height of image after scaling

问题描述

我正在使用CSS缩放图像，缩放后，如何获得缩放后的高度和宽度，而不是原始宽度和高度，而是缩放后的宽度和高度?我想使用jquery进行更多了解，这是 jsfiddle

i am scaling an image using css how can i get its height and width after scaling not the original width and height but width and height after scaling. i want to do this using jquery for more understanding this is the jsfiddle

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

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

推荐答案

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

This is acutally a very interesting question for me, and I've learned quite a bit.

在SO和其他站点上到处都可以看到，屏幕上显示了CSS转换，但CSS转换却不在DOM中(例如:before，:after).因此，您必须使用一个名为.getBoundingClientRect()的偷偷摸摸的javascript命令-它会读取尺寸.

Reading around here on SO and other sites, a CSS transformation is shown on your screen, but it is not in the DOM (like :before, :after). So you have to use a sneaky javascript command called .getBoundingClientRect() - and it will read the dimensions.

这是一个 FIDDLE (带有示例).

Here is a FIDDLE with an example.

这是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-参考.它不是第三方.

PS - .getBoundingClientRect() is native JS supported by most browsers - REFERENCE. It's not third-party.

这篇关于缩放后获取图像的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！