如何让图像在中间使用css调整大小？

我使用拖放功能，当我将图像拖动到其他div时，它会调整图像大小，请参阅下面的代码。但它调整到原始图像的左侧角落，所以光标和图像位于不同的位置，这对用户来说是令人困惑的。有没有办法让图像调整大小并保持相对于光标的位置，或者将图像与光标居中放置在中间？如何让图像在中间使用css调整大小？

这是CSS代码，我现在使用：

.Skin .PGR .DragAndDrop .stack div ul li.stack span label { 
    width: 200px; 
    height: 255px; 
} 
.Skin .PGR .DragAndDrop .stack div ul li.stack span label img { 
    width: 200px; 
    height: 255px; 
    visibility: visible; 
} 
.Skin .PGR .DragAndDrop .stack .Group li.stack span.rank { 
    visibility: hidden; 
} 
.Skin .PGR .DragAndDrop .stack div.Group ul li span img { 
    width: 177px;

来源

2012-12-24 user1925656

我的解决方案能帮助您吗？如果不够清楚，你所要做的就是将updatePosition（）函数绑定到拖放事件。我今天早上测试了它，它对我很好，希望它也适合你。 – SISYN

如果我理解你想要做的事情，这样的事情应该工作。基本上，您只需获取鼠标坐标，然后将图像的位置设置为鼠标坐标减去宽度/高度的一半即可。希望这可以帮助！

window.onload = track; 
var mouseX, mouseY; 
function track() { 
    if (window.Event) { 
      document.captureEvents(Event.MOUSEMOVE); 
    } 
    document.onmousemove = getCursorXY; 
    } 

function getCursorXY(e) { 
    mouseX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 
    mouseY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
} 

function updatePosition() { 
     var img = document.getElementById('myimage'); 
     var width = img.clientWidth; 
     var height = img.clientHeight; 

     img.style.position = "absolute"; 
     img.style.top = mouseY-(height/2); 
     img.style.left = mouseX-(width/2); 
}

来源

2012-12-24 09:50:40 SISYN

如何让图像在中间使用css调整大小？

回答

相关问题