jquery - 缩放后仍然无法计算出准确的宽度和高度

Question

我正在将图像移动到另一幅图像上方，如果不应用任何类型的缩放，图像将移动到正确的位置，但如果我应用缩放，它永远不会移动到正确的位置。可能宽度和高度已更改

这是 jsfiddle

$( "#location-default-dropdown" ).change(function() {
    var selection = $(this).val();
    $obj = $('#dragable');
    var MainImgwidth = $("#backgroundImg").width();
    var MainImgheight = $("#backgroundImg").height();

    var objWidth = $obj.width();
    var objHeight = $obj.height();
    //var objWidth =  $obj[0].getBoundingClientRect().width;
    //var objHeight = $obj[0].getBoundingClientRect().height;



    var left = 0;
    var top = 0;

    if(selection == "TopLeft")
    {
        left = 0;
        top = 0;
    }
    else if(selection == "TopCenter")
    {

        left = (MainImgwidth/2) - (objWidth/2);
    }
    else if(selection == "TopRight")
    {

        left = MainImgwidth - objWidth;
    }
    else if(selection == "CenterLeft")
    {

        top = ((MainImgheight/2) - (objHeight/2));
    }
    else if(selection == "Center")
    {

        left = ((MainImgwidth/2) - (objWidth/2));
        top = (MainImgheight/2) - (objHeight/2);
    }
    else if(selection == "CenterRight")
    {

        left = MainImgwidth - objWidth;
        top = (MainImgheight/2) - (objHeight/2); 
    }
    else if(selection == "BottomLeft")
    {

        top = MainImgheight -objHeight;

    }
    else if(selection == "BottomCenter")
    {

        top = MainImgheight -objHeight;
        left = (MainImgwidth/2) - (objWidth/2);
    }
    else if(selection == "BottomRight")
    {

        top = MainImgheight - objHeight;
        left = MainImgwidth - objWidth;
    }

   $obj.css({'left':left+'px','top':top+'px'});

});

Answer 1

据我所知，这种行为是正确的。当某些东西被变换时:缩放……它保持正常的宽度、高度和位置。这在某些情况下非常有用，例如，您需要一组元素具有允许缩放的悬停状态，而不影响它们周围的元素。

看看我建的这个网站的悬停状态； http://playaz.co.uk

如果这些元素上的悬停状态确实改变了实际的宽度和高度，而不是 transform:scale；所有其他元素都会被推来推去(当然除非它们是绝对定位的，它们不需要)。

解决方案是只更改图像的宽度和高度。要“2.2 倍”缩放您的图像，请尝试这样的操作:

$('img').each(function(){
    $(this).css('width',$(this).outerWidth() * 2.2); 
});

固定 fiddle :http://jsfiddle.net/ADxw7/