根本不是图片问题，而是容器未约束好视觉逻辑；需用object-fit配合显式尺寸解决，但须避开height缺失、object-position未设、旧浏览器fallback不当、svg非替换元素等关键坑。
图片在响应式容器里拉伸、裁不全、留白位置不对——根本不是图片问题，是容器没约束好视觉逻辑。直接用 object-fit 配合显式尺寸就能解决，但必须避开几个关键坑。
为什么 object-fit: cover 没生效？检查容器有没有 height
很多人写了 object-fit: cover 却发现图片还是被拉长或缩成一团，最常见原因是容器没有明确的 height。object-fit 是基于内容框计算缩放基准的，如果父容器高度由内容撑开（比如 height: auto），那 cover 就无从“覆盖”起。
- 必须给
<img>或其直接父容器设置固定高度（如height: 200px）或比例约束（如aspect-ratio: 4 / 3） - 用
max-height不行——它不参与 layout 计算，object-fit看不到有效高度 - Flex/Grid 容器中，子项若未设
align-items: stretch，也可能导致实际渲染高度为 0
object-fit: contain 留白位置不居中？加 object-position
contain 默认把图片放在左上角，不是居中——这是容易被忽略的默认行为。尤其在图标、logo 或证件照场景下，顶部/左侧留白会显得很突兀。
- 搭配
object-position: center才能真正居中显示 -
object-position只在object-fit为contain、cover、scale-down时生效，fill和none下无效 - 值支持像素、百分比、关键词（如
top left、50% 75%），常用于微调裁剪焦点或留白分布
旧版 Safari 或 IE 需要 fallback？别硬套 background-image
Chrome 32+、Firefox 36+、Edge 16+ 和现代 Safari 都支持 object-fit，但 Safari 10–13.1 对 aspect-ratio 支持不全，IE 则完全不支持。这时候用 background-image 替代虽可行，但代价不小：
- 语义丢失：
<img src="..." alt="...">变成<div style="max-width:90%"></div>，alt 文本、SEO、可访问性全失效 - 响应式麻烦：需手动写
background-size: cover+background-position: center，且无法响应srcset或picture切换 - 更稳妥的降级方案：用
@supports not (object-fit: cover)包裹 fallback 样式，只对不支持的浏览器生效
SVG 或 inline 图标不能用 object-fit？换思路
object-fit 只作用于替换元素（replaced elements），比如 <img>、<video></video>。SVG 作为内联元素或通过 <svg></svg> 标签插入时，它不是替换元素，object-fit 完全无效。
- SVG 图标建议用
<svg></svg>+viewBox+width/height控制缩放，或转为<img src="icon.svg">再用object-fit - 字体图标（如 Iconfont）更不能套
object-fit，它们本质是文本，应靠font-size和line-height对齐 - 纯色图标或简单图形，用 CSS
mask或clip-path配合背景色，比强塞object-fit更可控
真正难的不是写对那几行 CSS，而是想清楚：这张图到底该“完整显示”还是“填满区域”，以及用户是否在意被裁掉的边缘。选错 object-fit 值，再精细的 object-position 也救不回语义和体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
