可替换元素

object-fit

object-fit 用来控制 替换元素（通常是 <img>、<video>、<canvas>）在固定宽高容器中如何适配。它类似于 background-size，但作用在真实元素上。

图片 拉伸填满 容器，可能会变形。

适用：不关心变形，只需要铺满。

图片 完整显示，保持比例，整个内容可见。

效果：可能左右或上下会留白。

常用于：产品图、Logo。

图片 裁剪填充 容器，保持比例，不变形。

效果：可能会超出容器然后被裁掉。

常用于：Banner、头像、卡片封面。

不缩放、不拉伸，按图片原始尺寸显示。

效果：如果图比容器大，会被裁切。示例代码

css

<img src="xxx.jpg" style="width:200px; height:200px; object-fit:cover;" />

object-position 用来控制替换元素（如 <img>、<video>）在容器内部的对齐位置，通常和 object-fit 搭配使用。

它的作用类似于 background-position。

html

object-position: <x> <y>;