图片适配需三步：一查原始尺寸与建议尺寸，超1920×1080且标“已缩放”则需手动优化；二设容器约束，勾选“保持宽高比”，最大宽度100%、高度自适应，并关闭懒加载；三转WebP格式（Squoosh或发布页智能压缩），辅以响应式断点设置及CSS强制约束。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
码上飞AI生成的网站页面中图片尺寸超出容器、拉伸变形或加载缓慢，导致用户无法顺畅浏览内容，需要在不破坏布局和交互功能的前提下快速适配。
检查图片原始来源与格式
进入码上飞后台「项目管理→资源中心→媒体库」，确认所有图片是否为上传时直接拖入的原始高清图。若图片来自手机拍摄或设计稿导出，常见为PNG（带透明通道）或未压缩JPEG，单张常超3MB。【原始图未压缩会强制触发码上飞CDN自动缩放，但缩放逻辑不保留宽高比，易导致裁切或模糊】
点击任一图片右侧「详情」，查看「原始尺寸」与「建议尺寸」两栏数值——若原始尺寸＞1920×1080，且「建议尺寸」显示“已缩放”，说明平台已干预，但未生效于前端渲染。
在码上飞编辑器中手动设置图片容器约束
双击页面中目标图片，在右侧属性面板找到「尺寸设置」区域。
勾选「保持宽高比」，然后将「最大宽度」设为100%，「高度」设为「自适应」；这一步确保图片在不同屏幕下等比缩放，不会撑破卡片或文字区块。
若该图片用于轮播图或Banner主视觉，需额外关闭「懒加载」开关——码上飞默认开启懒加载，但首屏大图若被延迟加载，会出现空白闪烁，影响首屏体验。
替换为WebP格式并控制体积
方法一：用本地工具批量转格式
将原图拖入免费工具Squoosh（web.dev/squoosh）→ 选择WebP编码器 → 质量滑块调至75 → 点击「Download」。WebP在同等清晰度下体积比JPEG小25%～35%，码上飞对WebP支持完整，且CDN会跳过二次压缩。
方法二：在码上飞发布前启用智能优化
项目发布页勾选「启用图片智能压缩」→ 系统自动对PNG/JPEG转WebP并限制单图≤500KB。注意：【此选项仅对新上传图片生效，已发布的旧图需手动删除后重传】
方法三：用CSS内联样式强制约束（适用于需精确控制的特殊模块）
在对应组件的「高级设置→自定义CSS」中粘贴：img { max-width: 100%; height: auto; display: block; }。这行代码覆盖码上飞默认图片样式，防止浮动错位，尤其适配图文混排模块。
针对响应式断点做差异化处理
第一步：点击编辑器右上角「响应式预览」图标，依次切换「桌面端→平板→手机」视图。
第二步：在手机视图下，选中图片→右侧属性面板中单独设置「移动设备最大宽度」为90vw，「高度」设为「固定200px」。此举避免小屏下图片过度挤压文字行距。
第三步：返回桌面端视图，取消勾选「继承移动设置」，再将「桌面端最大宽度」设为720px。这样同一张图在不同设备呈现合理尺寸，而非简单等比缩放。
第四步：保存后点击「预览」，用真机扫码打开，滑动查看图片边缘是否仍有溢出或留白异常——若有，说明父容器存在padding或margin未归零，需回退到该容器组件修改内边距。
