必须用 aspect-ratio 锁定容器比例 + transform: scale() 实现等比例放大，因 fr 是离散值不可过渡，且 Grid 无动态争空间能力；直接改 grid-template-columns 会导致跳变、错位、响应式失效。
不能只靠或实现等比例放大，必须用锁定容器比例 +控制内容适配，否则放大后图片必然拉伸或裁剪失控。
为什么直接改
的
值做不到等比例放大
是布局阶段的静态分配单位，属于离散值（discrete），CSS 规范明确禁止对其做
。写
完全无效；用 JS 动态重写也会触发整行重排，导致跳变、错位、响应式失效。
浏览器不会对
进行插值计算，它要么是 1fr，要么是 2fr，中间没有过渡状态
即使成功“放大”某格，其他格子也不会自动收缩 —— Grid 不具备 flex-grow 那样的动态争空间能力
悬停时若还叠加了
或
，结果更不可控
真正可行的等比例放大：用
+
这不是“欺骗”，而是符合现代 CSS 设计逻辑的解法：保持网格结构稳定，只对视觉层做局部变换。关键在于让放大后的元素仍维持原始宽高比，不挤压邻居。
给每个网格项（如
）设
，确保基础比例一致
必须配
（或
）
悬停时只对
应用
，并加
防溢出
务必设
和
，避免被遮挡或闪烁
容易踩的坑：放大后图片变形、留白、或边缘被切
问题几乎都出在
和
的组合没对齐语义，或者遗漏了关键约束。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
必须设在网格项（
）上，不能设在
标签上 —— Safari ≤15.4 会忽略，且替换元素行为不稳定
用了
却没配
，
直接失效
放大时未限制最大缩放倍数（比如
），导致图片边缘被父容器
切掉太多
网格容器本身有
或
，但没在开发者工具里检查实际可渲染区域，误判了缩放基准
移动端横竖屏切换时比例错乱怎么办
不是
失效，而是你依赖了固定像素值或没封住最小尺寸边界。
避免在
里写死
—— 小屏下 240px 超过视口宽度，Grid 会强行压缩列宽，破坏比例
改用
，让最小宽度随视口线性变化
横竖屏切换本质是容器尺寸突变，需加
检查
是否被重算，必要时用
防止 Grid 子项默认
干扰高度结算
真正难的不是写对那几行 CSS，而是想清楚：你要的是视觉上的“突出”，还是逻辑上的“空间重分配”。前者用
稳准快；后者非得用 JS 手动重算
，还得处理 resize、焦点、无障碍等一连串副作用。
grid-template-columnsfraspect-ratioobject-fitgrid-template-columnsfrfrtransitiontransition: grid-template-columns 0.3s1fr → 2frminmax()auto-fitaspect-ratiotransform: scale().grid-itemaspect-ratio: 4 / 3.grid-item imgwidth: 100%; height: 100%; object-fit: covercontain.grid-itemtransform: scale(1.08)overflow: hiddenz-index: 2transition: transform 0.25s ease, z-index 0.1saspect-ratioobject-fitaspect-ratio.grid-itemobject-fit: coverwidth: 100%; height: 100%object-fitscale(1.3)overflow: hiddenpaddinggapaspect-ratiominmax()minmax(240px, 1fr)minmax(clamp(200px, 25vw, 280px), 1fr)@media (orientation: landscape)aspect-ratiomin-height: 0min-height: autotransformgrid-template-columns