object-fit 没有改变图片盒子：contain 留白与 cover 裁切怎样选择

图片设置object-fit:cover后，主体被裁掉了；改成contain，图片周围又出现空白。两种结果都可能正确，因为object-fit选择的是图片内容怎样放进既定盒子，不是替你决定盒子本身应该多宽多高。

先把设计问题说具体：卡片是否必须统一高度，整张图能否裁切，主体是否可以靠边，空白能否接受。没有这些条件，单纯把cover当作“图片自适应”默认值，会在头像、商品主图和图表之间反复制造冲突。

这份实验使用自己画的SVG，不依赖外部图片地址。三个img盒子都是240×180，源图比例为2:1；圆形和左右标记可以直接看出变形、裁切与空白。

先准备一张容易观察的源图

新建scene.svg，放在HTML旁边：

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="320" viewBox="0 0 640 320">
  <rect width="640" height="320" fill="#d6e6f8"/>
  <path d="M0 0H170V320H0Z" fill="#f2c785"/>
  <circle cx="460" cy="160" r="88" fill="#3873ae"/>
  <text x="28" y="170" font-size="32" font-family="sans-serif">LEFT</text>
  <text x="405" y="170" font-size="28" fill="white" font-family="sans-serif">CIRCLE</text>
  <path d="M0 10H640M0 310H640" stroke="#24344b" stroke-width="10"/>
</svg>

图片中圆应该保持圆，LEFT应该位于左侧。上下两条深线代表源图边界，便于看出哪些内容没有进入盒子。

相同盒子，三种内容适配方式

保存为fit-demo.html，同目录打开。选择器只改变cover那张图片的object-position，其他条件不动。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<title>图片内容与盒子</title>
<style>
body { margin: 24px; font: 16px sans-serif; }
.gallery { display: flex; gap: 28px; flex-wrap: wrap; }
figure { margin: 0; }
img { display: block; width: 240px; height: 180px; outline: 2px solid #26374e;
  background: repeating-linear-gradient(45deg,#fff 0 8px,#eee 8px 16px); }
#contain { object-fit: contain; }
#cover { object-fit: cover; }
#fill { object-fit: fill; }
figcaption { margin: 12px 0; }
pre { white-space: pre-wrap; }
</style>
<label for="position">cover的主体位置</label>
<select id="position"><option>center</option><option>left</option><option>right</option></select>
<div class="gallery">
  <figure><figcaption>contain：保留整图</figcaption><img id="contain" src="scene.svg" alt="完整比例示意图"></figure>
  <figure><figcaption>cover：填满后裁切</figcaption><img id="cover" src="scene.svg" alt="裁切比例示意图"></figure>
  <figure><figcaption>fill：拉伸到盒子</figcaption><img id="fill" src="scene.svg" alt="拉伸比例示意图"></figure>
</div>
<pre id="report" role="status"></pre>
<script>
const images = [...document.images];
function report() {
  document.querySelector('#report').textContent = images.map(image => {
    const box = image.getBoundingClientRect();
    return `${image.id}: 盒子${box.width}×${box.height}，源图${image.naturalWidth}×${image.naturalHeight}`;
  }).join('\n');
}
for (const image of images) image.addEventListener('load', report);
document.querySelector('#position').addEventListener('change', event => {
  document.querySelector('#cover').style.objectPosition = event.target.value;
});
report();
</script>
</html>

三行盒子尺寸相同，图像内容呈现却不同。contain按比例完整放入，源图绘制成240×120，上下各留下30px；cover按比例覆盖盒子，源图需要360×180，横向多出的120px在居中时分别裁去两侧60px；fill直接匹配240×180，圆会被拉成椭圆。

这些数值来自此处明确的源图与盒子比例。报告区的getBoundingClientRect测量的是img盒子，不会直接报告cover裁切后的源图坐标，不能拿它证明“图片没有被裁”。内容适配与元素布局是两层观察。

object-position 移动的是内容在盒子里的对齐

cover的默认居中未必让主体位于合适位置。选择left后保留更多左侧，选择right后保留更多右侧，盒子仍然240×180。它不会增加源图细节，也不会让已经被裁掉的两边同时回来。

百分比位置也不应简单理解成“源图上这个点一定在盒子左上角”。它与内容和盒子的对齐关系有关。产品若保存焦点坐标，需要用一致的坐标模型转换，分别在横图、竖图和不同容器比例下验证。

若关键内容分布在整张截图、表格或图表中，cover可能根本不合适。把图表横轴或截图上的按钮裁掉，会让配图失去信息。此时允许留白或采用自然高度，比把每张图强行塞进统一卡片更符合阅读需求。

头像与装饰封面则经常接受裁切，但仍要考虑主体位置。可以让编辑流程保存焦点，或针对不同展示位提供经过确认的裁切版本，不能仅凭桌面缩略图看起来居中就宣称移动端同样合适。

容器没有约束比例时，cover可能看不出效果

如果只设置width:100%、height:auto，img盒子通常随源图比例取得高度，内容与盒子比例本来一致，cover和contain的差异就不明显。属性没有失效，而是没有需要在两种比例之间做选择的空间。

要制作统一卡片，应先建立目标盒子的尺寸或比例，再决定内容适配。宽度来自布局、高度来自明确比例，是一种常见选择；但比例本身属于设计条件，不应为了让object-fit“生效”随便写死。

本例CSS固定实验尺寸，页面用flex-wrap换行，便于小屏查看三个状态。真实响应式组件需要把卡片宽度交给布局，在目标宽度变化时继续核对裁切，避免宽度缩了、高度却保留桌面固定值，导致内容越来越窄。

给img的HTML width和height设置源图尺寸，可以帮助浏览器建立固有比例与预留空间；CSS如果又明确覆盖最终宽高，就应理解两者分别承担什么任务。不要把源图像素尺寸直接当成组件必须占用的CSS像素尺寸。

none与scale-down还提供另外两种选择。none不为适配盒子主动缩放，内容可以超出可见范围；scale-down在不缩放与contain式缩小之间选择较小的结果，常用于不想把小图强行放大的展示。它们仍然不会替布局决定img盒子的尺寸。

若应用要求小图保持原始清晰度、大图缩到卡片内，可以单独为scale-down保留一份小尺寸位图样本。不要用这张可无限缩放的SVG证明位图放大质量，因为两种资源的绘制条件不同，应分别验收。

留白、模糊与文件体积是不同问题

contain出现的空白不是透明图片损坏，而是内容比例无法同时填满盒子两边。示例用棋盘背景让空白可见，实际产品可以选择合适背景，但不能用背景色掩盖需要保留的内容被裁的问题。

object-fit也不会改变下载的文件体积。把一张巨图画成小卡片，仍可能下载整份资源；位图在大屏模糊，则要检查资源分辨率、srcset与展示尺寸，而不是继续切换cover和contain。SVG实验的作用是隔离比例，不替代真实图片的加载与清晰度验收。

最后把盒子改为180×240，再观察同一张横图。contain会留下更多竖向空间，cover会裁掉更多横向内容，fill的形变更明显。能解释这次变化，就已经把内容比例与盒子比例分开，不必再把每一种图片问题都归结为“自适应没写好”。