没人告诉过你，img 元素自己会溢出

你有没有想过这样一个问题：<img> 标签在 HTML 里就是一个单独的标签，里面没有子元素，哪来的“溢出”？但你打开 DevTools 看一眼计算样式就会发现，浏览器默认给 img 挂了 overflow: clip。一个没有子元素的标签，裁什么？

答案就藏在“可替换元素”（replaced element）这个概念里。

img 是容器，也是内容

普通元素的内容是你写在 HTML 里的子节点，它们跟着盒子走。img 不一样，它有自己的一套逻辑。

<img> 标签本身是一个盒子（容器），它加载的那张图片资源是内容。这两套尺寸可以分开控制。你在 CSS 里给 img 设了 width: 300px; height: 200px，控制的是盒子的尺寸。图片文件本身可能是 1200×800，这是内容的固有尺寸。

浏览器不会去改图片文件，它只是把图片塞进盒子里。盒子多大是你说了算，图片多大是文件说了算。两套尺寸对不上，内容就有可能超出盒子——这就是溢出。

那为什么平时根本看不到？因为浏览器默认裁掉了。

从 Chrome 108 开始，img、video、canvas 这些可替换元素都遵循 overflow 属性。浏览器的默认样式表里写着：

img {
  overflow: clip;
  overflow-clip-margin: content-box;
}

overflow: clip 的意思是，超出内容盒的部分直接裁掉，连滚动条都不给。所以你平时用 object-fit: cover 让图片裁切居中展示，看起来一切正常，实际上溢出一直在发生，只是被默认裁掉了。

如果你把 overflow 改成 visible，情况就完全不同了：

img {
  overflow: visible;
}

图片内容会直接画出元素边界，盖到旁边的东西上。

object-fit 和溢出是什么关系

搞清楚了默认裁剪这个前提，再来看 object-fit 的几个值，就很好理解了。

object-fit: cover 最常用。它保证图片不变形，按照原始比例把盒子填满。代价就是图片内容会超出盒子，超出的部分被 overflow: clip 裁掉。你以为的“裁切居中”，其实是“先溢出，再裁掉”。

object-fit: none 更直接。它完全不管盒子多大，图片保持原始尺寸。假如盒子是 300×300，图片文件是 800×600，那图片内容就按 800×600 画出来，多出来的全溢出。默认被裁掉看不出问题，改成 overflow: visible 就会直接铺到外面去。

object-fit: fill 是默认值，也是 none 的反面。不管图片原始多大，内容都会被拉伸填满盒子，不留空隙。这种模式下不会有溢出，因为内容尺寸和盒子尺寸被强制拉成了一样，但图片会变形。

object-fit: contain 会把图片缩放到完全放进盒子，保持比例。盒子如果有剩余空间就留白。这种模式下内容不会超出盒子，所以也不会溢出。

border-radius 为什么会让图片溢出

圆角图片也是同样的道理。

图片内容是矩形的，但 border-radius 是画在元素盒子上的。盒子变成圆角了，图片内容的四个角还是方的。圆角之外那四个角的位置，内容照样存在——那就是溢出。只不过默认被 overflow: clip 裁掉了，看起来才像是“图片变圆了”。

如果你把 overflow 设成 visible，再配一个 border-radius: 50%，方形的图片角就会从圆形边界里冒出来。

object-position 也会造成溢出

object-position 控制图片内容在盒子里的位置。默认是 50% 50%，也就是居中。

如果你设成 object-position: 50px 0，内容整体往右平移 50px，右边超出盒子的那部分就是溢出。

当 object-fit 是 cover 或 none 的时候，内容本来就可能比盒子大。这时候再调 object-position，就是在已经溢出的基础上移动溢出内容的位置，超出的区域会变化，但溢出本身不会消失。

一个 img 能做什么

知道了这个机制，很多纯 CSS 的技巧就有了基础。

滚动查看效果

用一个 img 元素，设 object-fit: none 让内容保持原始尺寸，再配合两个方向的 object-position 动画来回移动，就能做出“图片在框里平移滚动”的效果：

img {
  width: 200px;
  height: 200px;
  object-fit: none;
  object-position: 0% 0%;
  animation:
    move-x 3s infinite linear alternate,
    move-y 5s infinite linear alternate;
  animation-composition: add;
}

@keyframes move-x {
  to { object-position: 100% 0; }
}

@keyframes move-y {
  to { object-position: 0 100%; }
}

animation-composition: add 是关键。它让两个动画的效果叠加，而不是互相覆盖。这样不用写四个关键帧来拼路径，一个水平动画加一个垂直动画就能让图片在整个区域内来回移动。

这个属性从 2023 年 7 月起已经在主流浏览器中广泛支持，Chrome 112、Edge 112、Firefox 115、Safari 16 都能用。

hover 浮现效果

同样的思路，图片内容比框大，hover 的时候把 object-position 从一个角落移到中心，看起来就像图片从框里慢慢浮现出来。不需要额外的 DOM 元素或伪元素，一个 img 标签就够了。

什么时候该用，什么时候不该用

这些溢出技巧不是常规做法。日常布局里，该用容器就用容器，该用 object-fit: cover 就用 cover，不要为了少写一个 div 硬凑。

它的价值在于结构受限的场景。比如你不能改 HTML，只能操作一个 img 元素，或者做一个纯 CSS 的加载动画不想加额外标签。这种时候，知道 img 自己就能溢出，你就多了一个选择。

更重要的是排查问题的时候。如果你发现图片内容跑出了元素边界，先检查一下 object-fit 和 overflow 的组合。很多时候问题的根源就在这里——可能是不小心写了 overflow: visible，也可能是某个全局样式把 overflow 改掉了。Chrome 108 的这次变更也导致了部分旧项目的图片出现意外溢出，原因就是之前浏览器忽略 img 上的 overflow 属性，现在开始遵循了。

排查的时候有一个快速验证的方法：在 DevTools 里选中 img，看计算样式里的 overflow 值。如果是 visible，那溢出的来源就找到了。

img 从来不是一个“简单显示图片的标签”。它同时是容器和内容，两套尺寸独立运作，还能让自己溢出。下次再遇到图片边界问题，你知道该从哪里查了。