图片布局错位是因缺乏显式约束，需设置固定宽高比或用容器包裹并隐藏溢出，再按场景选择覆盖、包含或拉伸填充模式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在码上飞AI中插入图片后页面布局突然错位、卡片变形、文字被顶出框外——这类问题不是代码错误，而是图片区域缺乏显式约束导致的渲染失控。平台默认将图片按原始宽高比自由伸缩，一旦上传未裁剪的手机截图或长图，容器会强行拉伸以容纳全部像素，直接破坏预设的栅格结构。
设置图片固定宽高比
进入应用编辑页，点击目标图片组件，在右侧属性面板找到【尺寸】模块。
关闭“自动适配”开关，手动输入宽度值（如320px）和高度值（如200px）；若需保持比例，勾选“锁定宽高比”，再只改一个数值，另一值将同步计算。
这一步必须做，【不锁定宽高比时，图片在不同设备预览中会随机拉伸或压缩，导致按钮错位、文字重叠】。
用容器包裹图片并限制溢出
方法一：拖入一个「空白容器」组件，把图片拖进该容器内部。
在容器属性中开启「隐藏溢出」，并将容器宽高设为固定值（例如400×250），图片尺寸设为100%×100%。
方法二：直接选中图片→右键→「嵌入容器」，系统自动生成带溢出控制的包裹层，无需手动调整属性。
注意：若图片本身分辨率远高于容器尺寸（如4000×3000像素图塞进400×250容器），仍可能触发浏览器重绘抖动，建议上传前先用工具压缩至1920×1080以内。
按场景选择图片填充模式
第一步：选中图片组件，打开右侧【样式】面板。
第二步：在「图片填充」下拉菜单中选择对应模式：
①「覆盖」：图片等比缩放后填满整个区域，超出部分被裁切——适合头图、海报类强调视觉冲击的场景。
②「包含」：图片等比缩放后完整显示在区域内，留白处为背景色——适合证件照、产品主图等要求信息完整的场合。
③「拉伸」：强制拉满不保持比例——仅限纯色背景图或抽象纹理，【禁用在人像、二维码、带文字的示意图上，会导致五官扭曲、文字模糊】。
第三步：搭配「对齐方式」微调构图，例如「覆盖+居中对齐」可确保人物面部始终位于画面中央。
