调整图片大小时出现错误。
嗨,Ronaldo,我不确定是否有简单的方法能在所有用例中全局修复这种行为,因为你是为两个尺寸调整图像大小,而不仅仅是宽度(那样高度不会改变)。 我建议你可以尝试用这个“可调整大小”选项扩展图像组件 “''js 可调节大小:{ ratioDefault: true, keepAutoHeight: true } ``` 如果这样对你有用,告诉我
阅读下方完整回答 ↓问题
葡萄JS版本
- 我确认使用最新版本的GrapesJS
你用的是什么浏览器?
勇敢浏览器 最后版本
可复制演示链接
https://grapesjs.com/demo.html
描述一下那个虫子
如何复现这个漏洞?
- 打开演示页面。
- 放置图像。
- 双击选择图片。
- 将宽度设置为100%。
- 将高度设置为自动,或点击高度属性中的“x”。
- 调整图片大小,你会发现宽度保持百分比,高度以像素计算
- 点击预览眼
- 确保图像被压平。
预期的行为是什么? 缩放算法应该用像素计算,而不是混合
目前的行为是什么? Resize函数保持%作为主CSS Unity,并用像素计算高度,但当我们点击预览按钮时,列的大小会变化,比如宽度(钢材加工百分比)变了,但高度(像素单位)是坏的。
看看视频里有个bug发生的情况: https://www.loom.com/share/f2ed011b207a4e5fb2ac916c94ab0a5b
行为准则
- 我同意遵守本项目的行为准则
回答(4)
嗨,Ronaldo,我不确定是否有简单的方法能在所有用例中全局修复这种行为,因为你是为两个尺寸调整图像大小,而不仅仅是宽度(那样高度不会改变)。 我建议你可以尝试用这个“可调整大小”选项扩展图像组件 “''js 可调节大小:{ ratioDefault: true, keepAutoHeight: true }
如果这样对你有用,告诉我
你好,@artf。我们想通过根据用户的使用场景,将宽度和高度的单位始终合并。这意味着当用户将宽度从像素改为百分比时,例如高度也会被改为百分比。有没有办法做到这一点? 另外,我们怎么把调整尺寸改成用%作为默认单位?
如果这样对你有用,告诉我
你好,Arthur,这些配置没有改变图片,它总是用“px”而不是“auto”来设置高度,正如属性“keepAutoHeight”所暗示的那样
谢谢你举报,@ronaldohoch。 关于缩放图片时出现错误的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期 editor.on('component:mount', (c) => console....
相关问答
通过相似的问题讨论继续研究。
问题 #4208
每个元素的样式点击状态错误
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Brave Last 在 Chrome Last 和 Safari Last 上测试过。 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这...
问题 #6152
通过自定义代码添加的CSS在移除自定义代码组件后依然存在
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 任何 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?添加带有HTML + CSS的自定义代码组件删除自定义代码组件。 预期的行为是什么?...
问题 #5788
CSS 属性的默认值
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 无可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 大家好!!<3 如何复现这个漏洞?打开[Grapesjs官方网页演示](https://grapesjs...
问题 #5810
不必要的画布风格
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Arc 版本 1.35.0 / Chromium 引擎 123.0可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 我的特殊情况: 就我而言,插件和通用样式...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
教程
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
浏览插件分类
直接跳转到市场上的插件分类页面。