如何讓圖像在中間使用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調整大小？

回答

相關問題