用 object-fit 是解决响应式图片失真的最直接方式：cover 保持比例填满容器并允许裁剪，适合封面图；contain 保持比例完整显示但可能留白，适合产品图；装饰性图片可用 background-image 替代；需注意 IE 等旧浏览器兼容性。
图片在响应式布局中失真，通常是因为容器尺寸动态变化，而图片默认按原始宽高比拉伸或裁剪不当。用 object-fit 是最直接有效的解决方式，它控制的是 <img> 或带图片背景的元素（如 <div>）如何适应其容器，而不是靠父容器强行缩放图片本身。
object-fit: cover —— 保持比例、填满容器、允许裁剪
适合封面图、头图、卡片缩略图等对构图完整性要求不高、但需视觉饱满的场景。图片会等比缩放并完全覆盖容器，超出部分被隐藏。
- 确保图片父容器有明确宽高（如
width: 100%; height: 200px;或使用 aspect-ratio） - 给
<img>添加：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;确保焦点居中 - 优势：天然支持响应式容器，无需担心
<img>的加载行为或 alt 文本干扰
别忘了兼容性和兜底
object-fit 在 IE 中完全不支持，Android 4.4 以下也受限。如需兼容老设备：
- 用 object-fit-images 这类轻量 polyfill
- 或为关键图片准备媒体查询下的固定尺寸+
max-width: 100%备用方案 - 现代项目中，可直接忽略 IE，但需测试主流 Android/iOS WebView 表现
