为什么我的图像左上角有一个灰色框浮动，为什么代码只调整灰色框的大小而不是图像本身？答案

【问题标题】：Why is there a grey box floating in the upper-left corner of my image and why is code only resizing the grey box and not the image itself?为什么我的图像左上角有一个灰色框浮动，为什么代码只调整灰色框的大小而不是图像本身？
【发布时间】：2026-02-01 13:40:02
【问题描述】：

我正在将一些 JavaScript 嵌入到我的 Showit 网站中。这是一个拖放功能来描绘拼贴/情绪板效果。代码运行良好，但我无法调整图像大小。

图像的左上角有一个灰色框，表示任何代码更改。例如，现在宽度/高度设置为 0px，所以灰色框是一个小点。如果我将它增加到 50px，它会变大，但图像保持相同的大小。

我假设需要对父代码进行一些调整，但我对 javascript 还是很陌生。我在下面分享链接，希望能有所帮助。

提前非常感谢！

这里是运行代码的链接 https://denofdreamers.w3spaces.com/saved-from-Tryit-2022-01-15.html

这是目前为止的代码链接 https://www.codepile.net/pile/bOVJbwOm

【问题讨论】：

请澄清问题。我确实看到了那个灰色的小盒子，你想用它做什么？

标签： javascript html jquery css

【解决方案1】：

您提到的问题发生是因为您将框架的width 和height 设置为0px。我禁用了通过 jquery.ui 使用的类，以便在 <img> 元素上放置一个框架，并在 <img> 元素上添加一个边框。

$(function() {
  $( "#draggable1" ).draggable();
  $( "#draggable2" ).draggable();
  $( "#draggable3" ).draggable();
});

* {
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  flex-wrap: no-wrap;
}

.draggableImage{
  padding: 5px;
  border: 5px solid #EEE;
  width: 50%;
}

.draggableContainer{
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
  <div id="draggable1" class="draggableContainer">
    <p>
      <img class="draggableImage" src="https://static.showit.co/file/sJcRsatKTmC2WnNTV_hJVA/118367/screen_shot_2022-01-15_at_12_07_17_pm.png">
    </p>
  </div>

  <div id="draggable2" class="draggableContainer">
    <p>
      <img class="draggableImage" src="https://static.showit.co/file/_rojEJb2QBytWaRmzMySCg/118367/screen_shot_2022-01-15_at_12_06_58_pm.png">
    </p>
  </div>
  
  <div id="draggable3" class="draggableContainer">
    <p>
      <img class="draggableImage" src="https://static.showit.co/file/_rojEJb2QBytWaRmzMySCg/118367/screen_shot_2022-01-15_at_12_06_58_pm.png">
    </p>
  </div>
</div>

【讨论】：

有没有办法让图像的起始位置有些重叠？类似于它们在我的原始代码中的样子？我希望可能有 10 到 15 张图片，所以如果它们继续堆叠，它们就会从网页上消失。谢谢！
@denofdreamers 我开发了一个解决方案。你可以测试一下。
好了，快到了！现在，当我将图像宽度设为 50% 时，它们会在向右拖动时继续缩小。它们开始时大小相同，但一旦我开始拖动它，它就会缩小。有办法解决吗？
@denofdreamers 我更新了代码。我希望问题得到解决。
太棒了！非常感谢！这是我很久以来一直想创造的东西，所以我非常感谢你的帮助。如果我可以再问一件事......我如何指定 div id 来删除其中一张照片的边框？我想添加一些 png 文件，希望这些文件没有边框！

【解决方案2】：

图片是否需要在p 元素内？

调整内容和样式似乎可行。

<div id="draggable" class="draggable ui-widget-content ui-draggable" style="position: relative;left: 5px;top: -4px;background: none;width: 167px;height: 100px;">
    <img src="..." style="width: 100%; height: auto;">
</div>

更新后img 元素继承了可拖动 div 的宽度。

【讨论】：