网站图片变形、裁切或页面错位怎么办？电脑与手机端排查清单

同一批案例图片尺寸不同，列表可能高低错位；手机端打开详情图又可能被拉长或截掉文字。处理这类问题，先区分“变形”“裁切”和“加载时跳动”：三种现象原因不同，也不适合用同一条CSS规则解决。

图片被拉伸：检查宽高约束

若元素被同时指定固定宽度与固定高度，但原图比例不同，浏览器可能把画面压扁或拉长。正文配图通常可设为max-width:100%; height:auto，让高度随实际比例变化。首页或案例列表若需要统一卡片高度，则应使用固定比例容器，并明确采用何种展示方式，而不是强行拉伸图片内容。

图片被裁切：在cover与contain之间选择

CSS object-fit:cover会保留图片比例并填满容器，但多出的部分会被裁切；contain会完整显示图片，可能留下空白。商品实拍或视觉封面可以评估cover，含有文字、表格、网页截图或二维码的图片更适合完整显示。必要时调整object-position，让主体位于可见区域。MDN文档明确指出，默认的fill在容器与图片比例不同的情况下可能产生拉伸。

手机端特别检查三处

1. 缩小屏幕时，是否有写死的像素宽度撑破内容区；
2. 详情长图是否被套用了列表缩略图的固定高度规则；
3. 图片上的文字、按钮或二维码是否因裁切而不可读、不可扫描。

可以分别为卡片缩略图和文章正文图设置样式，不要用一条全站img规则覆盖所有场景。确需统一网格时，最好从素材制作阶段就约定封面比例与安全留白。

加载时错位：预留图片空间

图片尚未加载就挤开下方内容，是布局偏移问题。可在HTML中提供符合实际比例的width与height，或在容器中设置aspect-ratio，让浏览器提前预留空间。修改后分别在电脑、手机和慢速网络下复测首屏、列表及详情，不只看开发电脑上的一张截图。

参考资料：MDN：object-fit；web.dev：优化布局偏移。