无需登录 数据私有 本地保存

CSS object-fit 与 object-position 演示 - 图片填充对比

CSS 开发工具 CSS object-fit 图片 演示
10
0
0
0

CSS object-fit & object-position 可视化演示

直观对比五种填充模式，拖拽调整图片位置，实时生成CSS代码

280px
280px
拖拽调整 object-position 拖拽图片或使用下方预设
交互演示图
当前 object-position： 50% 50%
生成的 CSS 代码
.container { width: 280px; height: 280px; overflow: hidden; } .container img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
object-fit 常见问题
fill（默认值）：拉伸图片填满容器，不保持宽高比，图片可能变形。
contain：等比缩放图片使其完全显示在容器内，可能留白。
cover：等比缩放图片填满容器，超出部分裁剪，适合头像、背景图等场景。
none：图片保持原始尺寸，不缩放。如果图片大于容器则被裁剪，小于容器则周围留白。适用于需要精确控制图片显示的场景。
scale-down：智能选择 none 和 contain 中显示效果较小的那个。图片小于容器时保持原尺寸，大于容器时等比缩小到contain效果。
object-position: 50% 50% 表示图片的中心点与容器的中心点对齐。百分比是相对于"容器尺寸减去图片显示尺寸"的差值。例如水平方向，0% 对齐左边缘，100% 对齐右边缘，50% 居中。支持像素值如 object-position: 20px 30px，也支持关键词如 top left、center bottom 等。
object-fit 用于 <img>、<video> 等替换元素，而 background-size 用于背景图片。
cover ≈ background-size: cover
contain ≈ background-size: contain
fill ≈ background-size: 100% 100%
object-position 对应 background-position。选择哪个取决于图片是作为内容(img标签)还是装饰(背景图)。
object-fit 和 object-position 在现代浏览器中广泛支持，包括 Chrome 31+、Firefox 36+、Safari 10+、Edge 16+，以及 iOS Safari 10+、Android Chrome 等移动端浏览器。IE 浏览器不支持，但微软已于2022年停止支持IE。目前全球覆盖率超过 97%，可以放心使用。
🔧 相关工具