用 object-fit 替代 width/height 强制缩放，配合 aspect-ratio 统一容器比例，并通过 srcset 提供多倍图；ie11/safari 旧版需 @supports 降级及 background-image 模拟。

图片在Grid中被拉伸变形怎么办

直接给 img 设 width: 100%; height: 100% 是最常见错误——它强制缩放，破坏宽高比。真正该用的是 object-fit，配合 Grid 的轨道控制。

• object-fit: cover：保持比例裁剪填满（推荐用于封面图、头像）
• object-fit: contain：保持比例完整显示，可能留白（适合产品图、文档截图）
• 必须同时设 width: 100%; height: 100%，否则 object-fit 不生效
• 别忘了加 object-position 控制裁剪锚点，比如 object-position: center top 防止人脸被切掉

Grid列数随屏幕动态变化但图片高度不一致

用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 是基础，但图片高度不同会导致网格错位。关键不是调图片，而是统一容器高度。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给每个网格项（如 .grid-item）设 aspect-ratio: 4/3 或 aspect-ratio: 1/1，现代浏览器原生支持
• 兼容性要求高时，用 padding-top: 75% + position: relative + 绝对定位图片替代
• 避免只靠 minmax() 而忽略行高一致性，否则 grid-auto-rows 会失效

小图在大网格里显得模糊或像素化

不是 CSS 问题，是图片资源没跟上分辨率。Grid 布局本身不放大像素，但会放大渲染尺寸。

• 用 srcset 和 sizes 提供多倍图：<img src="small.jpg" srcset="small.jpg 1x, large.jpg 2x">
• 确保原始图宽度 ≥ 网格最大可能宽度 × 设备像素比（如 1200px 宽网格 + Retina 屏 = 至少 2400px 图）
• 慎用 background-image 替代 <img>：语义丢失，且 background-size: cover 行为和 object-fit 不完全等价

IE11 或旧版 Safari 下 Grid + object-fit 失效

这两个特性在 IE11 中均不支持，Safari 13.1 之前 object-fit 在 flex/grid 子元素中也有 bug。

• Grid 回退方案：用 display: -ms-grid（仅 IE11），或改用 float + calc()（痛苦但可行）
• object-fit 回退：用 background-image + background-size 模拟，但需 JS 动态设置 background-image URL
• 最现实的取舍：用 @supports (display: grid) 和 @supports (object-fit: cover) 分层写样式，不支持的降级为单列流式布局

实际项目里最容易被跳过的，是图片加载完成前的占位处理——aspect-ratio 再准，如果图片还没加载，网格还是会闪动重排。得配合 img { will-change: transform } 或低 opacity 占位符才稳。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！