TRAE-AI编程
当你用 CSS 给一个容器设置背景图，却发现下半截怎么都显示不出来，多半是背景图片的高度超过了容器，而你没有告诉浏览器该怎么处理溢出的部分。最常见的原因是只写了 background-image 却没设置 background-size，图片按原始尺寸铺设，超出的部分被容器边缘裁掉。这种情况在前端切页面、做卡片背景、搭登录页时特别常见，新手往往反复调图片本身却忽略容器。本文先给结论，再讲清三个最容易犯的错误和对应的修法，以及 cover 与 contain 的取舍，帮你一次把背景图超高的问题彻底理顺。
先看结论
背景图显示不全，本质是“图的尺寸”和“容器的尺寸”没对齐。三个高频错误依次是：忘了设 background-size 导致原图溢出裁切、容器本身没有高度让背景无处安放、把 <img> 当背景用却没配 object-fit 导致溢出变形。修法对应为：设 background-size: cover 或 contain、给容器明确高度、用 object-fit 约束图片。先判断你用的是背景图还是 <img>，再对症处理。cover 的本质是对图片做图片裁切以铺满容器，contain 则保留完整画面、宁可留白也不切，这就是二者最关键的取舍。
一、错误一：只写 background-image 不设 background-size
新手最常犯的是只加一张背景图：
.box {
background-image: url("bg.png");
}此时图片按原始像素尺寸铺设，一旦原图比容器高，超出的部分直接被容器边界裁掉，看起来就是“下半截没了”。配置上应补上尺寸规则：
.box {
background-image: url("bg.png");
background-size: cover;
background-position: center;
}
cover 会等比缩放铺满容器（可能裁掉边缘），contain 则保证整张图都可见（可能留白）。关于这两者的取舍，可结合 CSS 教程 里背景属性的章节理解。运行预览后，预期是背景完整覆盖或完整显示，不再被生硬截断。一个常见的排错细节是：有些人设了 cover 仍觉得“被截”，其实是 background-position 默认把图片顶部对齐，把你想看的下半部分推到了可视区外。此时把位置改成 center 或 bottom，裁切区域就会转移到不重要的边缘。性能上，背景图本身不参与文档流，渲染开销主要来自图片解码；原图过大时务必先压缩，再交给 cover 缩放，否则大图会拖慢首屏。
二、错误二：容器没有高度，背景图“无处安放”
第二个坑是容器本身没高度。背景图依附于容器的盒模型，如果容器靠内容撑开、而里面暂时没内容，高度会是 0，背景自然看不到。
修复方式是给容器一个明确高度或最小高度：
.box {
height: 400px;
background-image: url("bg.png");
background-size: cover;
}
适用边界在于：用 height 适合固定区域，用 min-height 适合内容可变的区域。检查方法是临时给容器加一个背景色，看盒子本身有没有高度；若有颜色没图，说明高度问题而非图片问题。实际项目里更推荐用 min-height 而非 height：前者在内容变多时容器能自然撑开，背景不会被裁；后者是写死的高度，内容超出反而会溢出。验证阶段可用 JavaScript 教程 里读取元素尺寸的方式，用 getBoundingClientRect 核对容器与图片的实际高宽，确认裁切发生在哪一侧，再决定补高度还是调 background-size。
三、错误三：用 img 当背景却漏了 object-fit
第三个错误发生在你其实用的是 <img> 标签而非 CSS 背景，却指望它“像背景一样填满容器”。img 默认按自身尺寸渲染，高于容器时就溢出或把布局撑破。
正确做法是给 img 设定填充规则：
.box img {
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: cover 让图片在不变形的前提下填满容器，contain 则完整显示。预期结果是图片被约束在容器内不再溢出。若修复后图片变形，先检查 width 与 height 是否同时锁定，再确认 object-fit 值是否符合预期。更多结构层面的配合可看 HTML 教程。容易踩的衍生坑是只锁了 width: 100% 却忘了 height: 100%，结果图片只被拉宽、高度仍按原始比例，容器上下留白或溢出。务必两条同时锁定，再交给 object-fit 决定裁切方式；若发现图片被压扁，九成是宽高比与 object-fit 取值不匹配，优先检查 object-fit 是不是写成了 fill。
四、cover 与 contain 的取舍清单
选 cover 还是 contain，取决于你能否接受裁切：装饰性大图用 cover 更饱满；需要完整展示图表、二维码等信息的图用 contain 更安全。性能上，cover 可能只渲染可视区域，内存占用通常更友好，但原图过大仍会拖慢加载，建议压缩后再用。
检查清单：第一，容器是否有确定高度（优先 min-height）；第二，是否设了 background-size 或 object-fit；第三，是背景图还是 img，二者修法不同；第四，预览时是否完整显示且不变形；第五，大图是否经过压缩后再用。把这五步走完，背景图超高的显示问题基本都能收敛。如果你正在做一个需要完整展示的证书、二维码区域，请直接选 contain；若是纯装饰横幅，选 cover 更饱满，省心也省流量。如果背景图来自设计稿且尺寸固定，也可以直接用 background-size 写具体像素值来锁定显示区域，而不是交给 cover 去猜；在容器尺寸已知的前提下，这种方式反而更可控，裁切位置也更好预判。
常见问题
Q：cover 和 contain 到底选哪个？
装饰性、不在意被裁切的细节用 cover；必须完整展示内容（如截图、二维码）用 contain。二者都不会让图片变形，区别只在是否裁切。
Q：为什么我设了 cover 图片还是被截？
大概率是容器没有高度，或 background-position 把裁切区域对准了你想看的部分。先确认容器高度，再调整 background-position。
Q：背景图和 img 标签该用哪个？
纯装饰、不需要被屏幕阅读器读取用背景图；需要语义、可被选中或作为内容一部分用 img，并配 object-fit。
总结
背景图超高显示不全，根因是尺寸与容器没对齐。三个错误——漏设 background-size、容器无高度、img 漏 object-fit——对应三套修法。先分清“背景图还是 img”，再决定 cover 还是 contain，问题就迎刃而解。
