Flux Art等图片出现，按钮却换了位置
页面刚打开时按钮在标题下方，主图加载后整段内容突然向下移动，先检查是否提前为图片保留了空间。Flux Art 生成的视觉素材即使内容完整、像素清晰，也不会自动为网页声明布局尺寸。这里处理的是图片加载前后的页面位置变化，不是商品被容器裁掉。保存受影响页面的加载过程，确认移动的对象和触发时点，再决定修改哪个容器，不能仅凭最终静态截图宣布排版正常。
移动的元素未必就是原因
性能工具标出的受影响文字或按钮，可能只是被上方晚出现的内容推开。先观察图片加载前容器是否有高度、加载后高度是否改变，再排除广告、嵌入内容或脚本插入。一个页面可以同时存在多种位移来源。把触发对象、受影响对象、页面状态和时间关系分别记下；没有证据时不要把全部 CLS 都归给某张图片，也不把一次图片占位修复称为整页布局稳定性已经通过。
宽高属性提供比例线索，不替代全部布局
在图片元素上填写与实际素材相符的 width 和 height，可让浏览器在图片到达前获得宽高比线索。响应式显示仍由相应 CSS 管理，例如宽度随容器变化、高度按比例计算。属性不是模型生成参数，也不是要求所有设备都显示相同固定像素。若声明比例与实际图像不同，加载后仍可能调整。下表用于核对声明、容器和真实文件是否一致，不把随手填写一对数字当成有效占位。
| 检查对象 | 证据 | 发现差异后 |
|---|---|---|
| 真实资源 | 最终候选宽高 | 更正声明依据 |
| 初始空间 | 加载前容器尺寸 | 补合理占位 |
| 到达后空间 | 加载后尺寸变化 | 定位比例或脚本调整 |
| 响应式分支 | 各分支资源及比例 | 逐断点复核 |
| 加载失败 | 失败时页面布局 | 保留稳定错误状态 |
| 相邻内容 | 按钮与标题位置 | 确认未被晚插内容推动 |
先读取文件，再算需要的占位
在获准环境读取最终文件的真实宽高，核对页面实际使用的候选，而不是抄设计稿文件名。假设一张 1200×800 图片按原比例显示在宽 300 的槽位，预留高度可按 200 计算；这只是布局算例，不是真实网站测试或模型规格。若页面设计要求固定方框，则应明确由方框容器承担占位，再决定图片如何显示。不要一边声明原图比例、一边在加载后用脚本改成另一高度。
换构图的分支要有对应比例
同一构图的不同分辨率候选可以保持相同比例，但手机独立构图可能改变宽高比。使用 picture 等分支时，应把每个实际选中的资源及其预留方式纳入检查；现代浏览器可利用 source 上的宽高信息，仍需按目标环境验证。不要只给桌面回退图填尺寸就假定手机分支也稳定。断点两侧、极窄布局与最大容器状态都要记录，比例变化不能在图片加载后才临时补算。
占位要保留到真实内容接管
骨架块或空白占位若先被移除，而真实图片稍后才加入，页面可能先收缩再展开。应检查占位与内容交接的时机，避免两个阶段使用不同高度。图片失败、加载被阻断或用户处于慢网络时，也要有合理的稳定布局和必要说明。不能为了不跳动而永久遮住错误状态，更不能把不可见但占位正确的图片算作交付成功；可见内容、加载状态和空间稳定是分别验收的事项。
不要通过拉伸商品凑满固定框
预留空间解决的是文档布局，object-fit 等规则解决框内图像显示，二者不能混成一个动作。固定容器可能需要留白或经批准的裁切，但不能随意压扁商品来满足比例。若必须更换构图，保留原件并另走视觉批准。检查按钮、标题与图片边界的关系时，也要确认重点商品没有被遮住；技术上位置不再移动，不代表画面和营销信息就已经正确。
冷加载、失败和断点都留证
在隔离页面中模拟合理的慢速加载并记录加载前后位置，随后测试正常加载、资源失败与断点切换。测量工具的缓存设置应写清楚，否则本机已经缓存图片可能掩盖占位缺失。保存 CSS 与模板版本、资源摘要、视口和观察结果；不要仅凭警告消失代替真实过程检查。未覆盖的语言或嵌入组件保留待补证，后续换图、换比例或调整容器后重新验收受影响位置。
参考与平台分工
2026年11月8日核对 web.dev 布局位移说明：https://web.dev/articles/optimize-cls 。上述验收表属于外部网页交付流程，没有执行客户页面测试，也不宣称一次修复能带来排名或商业收益。Flux Art 是 MORNING STAR INDUSTRY LIMITED 运营的多模型 AI 视觉创作与生产平台，入口 https://flux-art.net/zh ，支持商业使用。输入素材权利、品牌图形及商品事实分别确认；图片制作完成后，网页空间声明仍需由页面实现和验收人员处理。