CSS如何制作响应式图片集布局_利用object-fit填充空间

object-fit 应选 cover、contain 或 scale-down：cover 等比缩放裁剪填满，适合封面；contain 等比缩放留白显全图，适合证件照；scale-down 仅大图缩放防模糊。图片容器宽高固定时，object-fit 怎么选固定尺寸容器（比如 300px × 200px）里塞不同比例的图片，想填满又不拉伸变形，object-fit 是核心。但选错值会直接导致裁切意外或留白明显。常见错误是默认用 object-fit: fill——它强制拉伸填满，完全破坏原始宽高比；或者用 object-fit: none，图片原样居中，四周大片空白。object-fit: cover：最常用。等比缩放后覆盖整个容器，超出部分裁剪。适合封面图、卡片图，但要注意关键内容别在边缘object-fit: contain：等比缩放至完全可见，留白不可避免。适合产品图、证件照预览这类必须看全图的场景object-fit: scale-down：只在原图比容器大时才缩放，否则保持原尺寸。小图不会被放大模糊，但可能和其它图高度不一致CSS Grid 布局下图片自动等高，object-fit 还得配 height: 100%Grid 容器设了 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))，每行图片高度不一致？那不是 Grid 的问题，而是图片自身没撑满行高。Grid 轨道高度由内容决定，而 <img alt="CSS如何制作响应式图片集布局_利用object-fit填充空间" > 默认是内联元素，有基线对齐和底部留白。不显式设高，object-fit 就没作用对象。立即学习“前端免费学习笔记（深入）”； NameGPT名称生成器 免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。