没人告诉你的真相：Image 元素竟能溢出

An image can overflow

我们通常认为 img 标签只是简单地展示图片，但实际上它隐藏着不少秘密。浏览器默认对 img 元素应用了 overflow: clip，这意味着内容溢出会被裁剪。当使用 object-fit: cover、border-radius 或 object-position 时，图片资源（内容）可能会超出 img 元素（容器）的边界，从而产生溢出效果。此外，object-fit: none 能让图片保持原始尺寸，不受 CSS 设定的宽高限制，进一步制造溢出。理解 img 作为“替换元素”的双重身份，能让我们利用这些特性创造出无需额外 HTML 结构的炫酷动画和交互效果。