本文详解如何通过 css grid 实现响应式等高布局，并确保所有图片严格保持 4:3 宽高比，关键在于让容器（如 button）继承网格单元格尺寸，而非仅设置 img 自身样式。
本文详解如何通过 css grid 实现响应式等高布局，并确保所有图片严格保持 4:3 宽高比，关键在于让容器（如 button）继承网格单元格尺寸，而非仅设置 img 自身样式。
在使用 CSS Grid 构建图库布局时，常见误区是仅对 <img alt="CSS Grid 中实现等高网格与统一 4:3 图片比例的完整解决方案" > 元素设置 height: 100% 和 aspect-ratio: 4 / 3，却忽略了其父容器（如 <button></button>）默认为内联元素、不自动撑满网格轨道高度。这会导致首列大图（跨两行）底部出现空白间隙——本质是 <button></button> 高度未占满分配的网格空间，导致内部图片虽按比例缩放，但整体未“拉伸”至容器边界。
核心解决逻辑：
Grid 轨道高度由内容决定（除非显式设定），而 grid-template-rows: 1fr 1fr 仅表示两行等分可用空间；若子项未主动占据高度，轨道会收缩。因此必须逐层传递高度约束：
-
.grid-gallery-item（直接 Grid 子项）默认为块级，但需确保无边距/填充干扰； -
<button></button>作为.grid-gallery-item的唯一子元素，必须显式设为width: 100%; height: 100%，使其完全填充网格单元格； -
<img alt="CSS Grid 中实现等高网格与统一 4:3 图片比例的完整解决方案" >在button内部再应用width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3，即可精准贴合且保持比例。
✅ 正确代码示例：
body {
padding: 40px;
}
* {
margin: 0;
padding: 0;
}
.grid-gallery {
list-style: none;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1rem;
}
.grid-gallery-item:first-child {
grid-row: span 2;
}
/* 关键：让 button 占满网格单元格 */
button {
width: 100%;
height: 100%;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}⚠️ 注意事项：
- 避免对
.grid-gallery-item设置height或min-height，否则可能破坏fr单位的弹性计算； - 若按钮需点击反馈，建议用
:focus-visible或伪元素覆盖，而非添加内边距（会破坏 100% 高度）； -
aspect-ratio已获现代浏览器广泛支持（Chrome 88+、Firefox 71+、Safari 15.4+），旧版可配合padding-top: 75%（4:3 → 3/4 = 75%）的 hack 方案，但本例推荐优先使用原生属性； - 确保 HTML 结构中每个
.grid-gallery-item仅含一个可伸缩容器（如button），避免多层嵌套导致高度传递中断。
通过以上调整，整个网格将严格等高，首列大图自然延伸至两行总高度，所有图片均以 cover 模式居中裁剪并维持 4:3 比例，实现专业级响应式图库布局。
立即学习“前端免费学习笔记（深入）”；
