设置resize: both后img元素仍不显示可调整大小角的问题

问题核心在于：正常加载的img是inline替换元素，resize属性默认对inline元素不生效，而加载失败的img会被浏览器渲染为类似inline-block的占位容器，因此能触发resize效果。

下面提供两种可行的解决方案：

方案一：修改img的display属性 #

直接将img设置为行内块级元素，让resize属性生效：

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

img {
  border: solid 2px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 50px;
  display: inline-block; /* 关键：将img转为行内块级元素 */
  margin: 4px 0; /* 可选：增加图片间距，优化编辑体验 */
}

方案二：用容器包裹图片（更推荐） #

通过外层容器承担resize功能，避免直接修改img的布局行为，在contenteditable环境中更稳定：

div[contenteditable="true"] {
  height: 250px;
  width: 75%;
}

.img-resizer {
  display: inline-block;
  border: solid 2px;
  padding: 5px;
  resize: both;
  overflow: auto;
  margin: 4px 0;
}

.img-resizer img {
  width: 100%;
  height: auto; /* 保持图片比例 */
}

对应的HTML结构：

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

补充说明 #

• resize属性生效的前提是元素的overflow属性不为visible，你的代码中已经设置了overflow: auto，这部分没问题。
• 方案二的优势在于：在contenteditable中编辑时，图片不会因resize导致布局错乱，同时可以更灵活地控制图片的容器样式。

内容的提问来源于stack exchange，提问作者Nunners