问题描述
我正在使用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.
这篇关于缩放后获取图像的宽度和高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!