用 object-fit 是解决响应式图片失真的最直接方式：cover 保持比例填满容器并允许裁剪，适合封面图；contain 保持比例完整显示但可能留白，适合产品图；装饰性图片可用 background-image 替代；需注意 IE 等旧浏览器兼容性。
图片在响应式布局中失真，通常是因为容器尺寸动态变化，而图片默认按原始宽高比拉伸或裁剪不当。用 适合封面图、头图、卡片缩略图等对构图完整性要求不高、但需视觉饱满的场景。图片会等比缩放并完全覆盖容器，超出部分被隐藏。 适合产品图、图标、数据图表等必须完整呈现细节的场景。图片会等比缩放至完全可见，容器内可能出现上下或左右空白。 当语义上图片非主要内容（如装饰性横幅），改用 CSS 背景更灵活： 立即学习“前端免费学习笔记（深入）”；object-fit 是最直接有效的解决方式，它控制的是 object-fit: cover —— 保持比例、填满容器、允许裁剪
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
background-image: url(...);background-size: cover; 或 background-size: contain;
background-position: center; 确保焦点居中别忘了兼容性和兜底
object-fit 在 IE 中完全不支持，Android 4.4 以下也受限。如需兼容老设备：
max-width: 100% 备用方案
