javascript - 如何在 Chrome 或 Edge 中模拟 _moz_resizing？

Question

所以我想在客户端调整图像大小，就像这样，但不仅仅是在 Firefox 中。

请注意，在 Firefox 中生成的元素具有属性 _moz_resizing = "true"。

代码很简单，如下所示。

document.querySelector('p').contentEditable = true;

<p>
  <img src='http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png' alt='stackoverflow icon'>
</p>

对于 Chrome 和 Edge 也有什么方法可以做到这一点吗？我将提供一个 JavaScript 解决方案，我希望它是 vanilla.js 而不是 jQuery。提前谢谢你。

Answer 1

您可以在 chrome 中通过使用 div 包装图像并添加此样式来实现此目的。

resize: both; 
overflow: auto; 

演示: https://jsfiddle.net/anwar3606/d184oqfz/

JQuery 用户界面

JQuery UI 提供了很好的可调整大小的功能并且非常易于使用。 https://jqueryui.com/resizable/#default