如何在Chrome或Edge中模拟_moz_resizing？

Question

我想在客户端进行图像大小调整，就像这样，但不仅限于Firefox。

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

The code is as simple as the following.

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解决方案，我更希望使用纯JavaScript而不是jQuery。提前感谢。

- Jose Serodio

Answer 1

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

resize: both; 
overflow: auto; 

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

JQuery UI

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

- Anwar Hossain

---

感谢您的回复。有几件事情我不喜欢这个解决方案。首先，它在Edge上无法工作，其次，它可以在Chrome上工作，但我无法将图像缩小（降低比例），只能使其变大。在Firefox中，它以某种方式继续工作，甚至更好。所以我给你一个赞，但仍然不是我想要的。 - Jose Serodio

还注意到，如果您隐藏滚动条（overflow: hidden），Chrome 将不再调整大小，但在 Firefox 中仍然可以正常工作... - Jose Serodio

我也不太喜欢我的解决方案，请再检查一下答案。 - Anwar Hossain

再次感谢您的回复。我说过，我更喜欢使用vanilla.js（纯JavaScript）而不是JQuery解决方案。我认为我改进了您给我的解决方案：https://jsfiddle.net/_jserodio/3b5aoq03/。我修复了溢出滚动（隐藏并仍在调整大小），至于缩小大小，您只需要使其最初非常小，这很好，如果您想在编辑一些文本时将其插入到段落中。但是我仍然无法弄清楚如何让它在`Microsoft Edge上工作，我的意思是，如果jQuery UI`的开发人员能够在他们的库中提供解决方案，我们也应该能够做到，对吧？ - Jose Serodio

2022年的新Edge浏览器内置了Chrome，现在我可以确认这个解决方案可以用于调整大小，包括缩小和放大。 - Jose Serodio