可调整大小的角不会出现在 img 上，尽管 CSS 中有 `resize: Both`

Question

我正在开发一个在线记事本工具，它使用

contenteditable

div 来存储文本。

由于粘贴图像有效，我尝试向所有 img 元素添加调整大小属性，但调整大小角不会出现。我将我的代码与 W3Schools 演示进行了比较；由于某种原因，损坏的图像可以调整大小，而加载的图像无法调整大小。

div {
  height: 250px;
  width: 75%;
}

img {
  border: solid 2px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 50px;
}

<div contenteditable="true">
  <img src="e">
  <img src="https://nunnerrs.github.io/notepad/assets/sketchy-happy.png">
</div>

Answer 1

您无法对内联元素应用调整大小 （请参阅开发人员文档） 并且

img

被列为内联元素 （请参阅 w3schools 列表）。

因此，您可以将图像包装在可调整大小的 div 中：

div {
  height: 250px;
  width: 75%;
}

.resizable{
  display: inline-block;
  border: solid 2px;
  padding: 5px;
  resize: both;
  overflow: auto;
  width: 50px;
  height: min-content;
}

img {
  width: 50px;
}

<div contenteditable="true">
  <div class="resizable">
    <img src="e" />
  </div>
  <div class="resizable">
    <img src="https://nunnerrs.github.io/notepad/assets/sketchy-happy.png" />
  </div>
</div>