焯！真服了，上个月给客户做的那个企业站，首页要搞个全屏大Banner，设计师给的图老好看了，我寻思这不就是 width:100%; height:100vh; 的事儿吗？结果你猜怎么着？测试机上一看，在某个奇葩比例的手机上，那美女总裁的脸被横向拉伸得跟《呐喊》似的，客户经理截图发群里的那一刻我直接想砸电脑。
这还不是最刺激的。最刺激的是我当时为了图省事，用了个2K的大图直接怼上去，心想现在网速都快。结果上线第三天，老板用他那个祖传3G网络的备用机打开，首页加载了整整15秒，那张大图一点一点刷出来的过程，比等高考成绩还煎熬。然后我就接到了运营同事凌晨四点的夺命连环Call，吼着说“网站是不是挂了！为什么我这里一片白！” 我特么盯着监控后台，看着那个代表首屏完全加载的FCP指标红得发紫，抽了三根烟才冷静下来想明白，图片填满根本不是尺寸问题，是特么一整套从视觉保真到性能保命的系统工程。
回头来看，真正的坑在这里：你以为的‘填满’和用户看到的‘填满’根本是两回事。我后来才发现，那种粗暴的拉伸，在有些浏览器里甚至会触发诡异的重新布局，整个页面会跳一下，体验稀碎。直到我找到了 object-fit: cover; 这个救命属性，配合父容器的 overflow: hidden，才算真正实现了‘裁剪式填满’，管你屏幕多畸形，核心内容区域永远在C位。但这就完了吗？太天真了兄弟。
你还得考虑图片格式（WebP敢不敢全量上？）、多倍图适配（视网膜屏糊不糊？）、懒加载（首屏性能还要不要了？）以及最重要的——响应式图片语法 srcset 和 sizes。我当时就是漏了这玩意，才让那张2K大图去轰炸所有人的手机流量。后来我一口气做了五个尺寸的图片，交给CDN处理，流量和加载速度立马就正常了，这种从地狱爬回来的感觉（说多了都是泪，这里有个我后来总结的保命清单）。
所以我现在给所有新人忠告：下次谁再跟你说‘图片填满很简单’，你就把这篇文章拍他脸上。那不是一个CSS属性，那是一整个从设计切图规范到前端编码再到性能优化的链路，一步错，轻则视觉灾难，重则全站性能雪崩，老板和用户会一起教你做人。真的，我宁愿多写一百行逻辑代码，也不想再调一次全屏响应式图片了，心理阴影太大了。
