适合封面图、头图、卡片缩略图等对构图完整性要求不高、但需视觉饱满的场景。图片会等比缩放并完全覆盖容器，超出部分被隐藏。

• 确保图片父容器有明确宽高（如 width: 100%; height: 200px; 或使用 aspect-ratio）
• 给 添加：object-fit: cover; width: 100%; height: 100%;
• 注意：若容器宽高比与图片差异大，边缘内容可能被裁掉，建议搭配 object-position 微调焦点（如 object-position: center top;）

object-fit: contain —— 保持比例、完整显示、留白可接受

适合产品图、图标、数据图表等必须完整呈现细节的场景。图片会等比缩放至完全可见，容器内可能出现上下或左右空白。

• 同样需要容器有确定尺寸，否则 contain 效果不明显
• 设置：object-fit: contain; width: 100%; height: 100%;
• 如需居中且避免拉伸，可加 display: block; 防止行内默认间隙

替代方案：用 background-image + background-size

当语义上图片非主要内容（如装饰性横幅），改用 CSS 背景更灵活：

• background-image: url(...);
• background-size: cover; 或 background-size: contain;
• background-position: center; 确保焦点居中
• 优势：天然支持响应式容器，无需担心 的加载行为或 alt 文本干扰

别忘了兼容性和兜底

object-fit 在 IE 中完全不支持，Android 4.4 以下也受限。如需兼容老设备：

• 用 object-fit-images 这类轻量 polyfill
• 或为关键图片准备媒体查询下的固定尺寸+max-width: 100% 备用方案
• 现代项目中，可直接忽略 IE，但需测试主流 Android/iOS WebView 表现