在 Chrome 和 Firefox 中调整图像大小时 contenteditable="true" 属性不适用于图像标签的解决方案

Posted 2023-03-06

【中文标题】在 Chrome 和 Firefox 中调整图像大小时 contenteditable="true" 属性不适用于图像标签的解决方案

【英文标题】：Solution for contenteditable="true" property is not working for image tag when resize image in Chrome and Firefox

【发布时间】：2021-06-06 23:45:00

【问题描述】：

我想调整 div 中 img 标签内的图像大小。我正在为 div 使用 contenteditable="true" 属性。我正在编辑内容，但我没有选择图像并在 chrome 和 firefox 中调整图像大小

我的代码很简单

div contenteditable="true" img src="img.png" div

此代码在 IE 浏览器中运行，我正在选择图像并调整图像大小，但在 chrome 和 firefox 中，它对我不起作用。

请给出一些解决方案。谢谢

【问题讨论】：

你需要使用 CSS。对于 div，设置溢出：初始；和调整大小：两者；

使用上面的 CSS 但它不会工作

【参考方案1】：

尝试将以下 CSS 添加到您的 div 中。 （如果这不起作用，请尝试将其应用于图像）

div
overflow: auto;
resize: both;

在以下小提琴中检查 'img' div 的 CSS：https://jsfiddle.net/x4ntjsv5/

【讨论】：

你能提供一个可重现的例子吗？就像在 JSFiddle 上一样