拖动 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 查询来设置较小设备的大小。