网页图片加载跳动：提前预留宽高比，别让正文被推走
图片出现时整页向下跳，会影响阅读与点击。本文说明怎样为图片保留空间，并区分原始尺寸、显示尺寸与裁剪比例。
图片出现前也应有位置
网页图片加载跳动，常见原因是浏览器在文件到达前不知道它需要多高。为img提供正确的width和height，可以帮助浏览器提前确定比例；再由CSS控制显示宽度和等比例高度。这里的尺寸应反映图片真实比例，不能随意填两个相同数字。
先找一篇包含多张图片的文章，在较慢网络条件下观察加载过程。记录哪些图片出现后推动了正文或按钮，检查它们是否缺少尺寸、容器是否固定，以及懒加载是否让问题更明显。首屏重要图片不要因为统一规则被延后到不合适的时机。
展示图与裁剪图分别处理
正文截图通常应完整展示，缩放时保留比例；列表封面可以采用统一容器与裁剪方式，但应确认关键文字没有被裁掉。避免用拉伸填满容器，让技术截图里的字符变形。图片失效时，也应有清楚的替代说明，而不是让布局忽然塌陷。
验收时关闭缓存重新加载，比较图片出现前后段落位置，并在手机和桌面各检查一次。不同尺寸图片混排时，逐张核对比例。文件压缩减少等待，预留空间减少位移，两者需要分别处理；不要把下载变快误认为布局问题已经根治。把封面与正文图的规则分开维护，后续投稿更不容易打乱页面。
官方参考
资料核对日期：2026年10月26日。
本文新增价值
图片出现时整页向下跳，会影响阅读与点击。本文说明怎样为图片保留空间，并区分原始尺寸、显示尺寸与裁剪比例。本文补充适用边界、输入对照与验收方法；操作建议为综合整理，未将官方示例当成本网站实测结果。
图片出现时整页向下跳，会影响阅读与点击。本文说明怎样为图片保留空间，并区分原始尺寸、显示尺寸与裁剪比例。本文补充适用边界、输入对照与验收方法；操作建议为综合整理，未将官方示例当成本网站实测结果。