拖動 CSS 縮放元素會移除縮放（HTML5 拖動，而不是 jquery）

Question

我正在創建一個可以拖放對象的調色板。 為了支持更小的屏幕尺寸並避免大量計算，我嘗試在調色板本身或帶有它們的對象上實現 css 縮放。

我正在使用 HTML draggable 來拖動圖像。 但是，當我拖動縮放的圖像時，縮放消失了，它再次顯示為全尺寸。 這使得很難理解事情將如何下降。

這是一支代碼筆，藍色框縮小到一半大小。

https://codepen.io/daprezjer/pen/xxYzdom

以及它的代碼：

<div id="container">
    <div id="dragging" draggable="true"></div>
</div>

#container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
#dragging {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: scale(.5);
}

當您開始拖動藍色框時，這是該 codepen 的快照。 您會看到拖動預覽的大小翻倍，回到原來的樣子

有什么方法可以使拖動的圖像與縮放的原始圖像保持相同的大小？

Answer 1

transform: scale(.5);

拖動時這條線不起作用。 所以最好直接使用響應式單位設置寬度和高度。 其次，您可以使用@media 查詢來設置較小設備的大小。