grid-layout布局下如何让内部image元素占满父容器100%可用高度

需调整的代码分为HTML和CSS两部分： #

1. 修正HTML标签写法 #

HTML原生图片标签为<img>而非<image>，同时删除标签上的height="100%"属性，改通过CSS控制样式更灵活：

<div class="wrapper">
  <div class="one">
    <img src="替换为你的图片地址" alt="图片描述文本">
  </div>
  <!-- 其余代码保持不变 -->
</div>

2. 新增/修改CSS规则 #

/* 原有.one规则基础上新增以下属性 */
.one {
  grid-area: a;
  height: 100%; /* 显式指定容器占满分配的网格区域高度，兼容不同浏览器默认行为 */
}

/* 新增图片样式规则 */
.one img {
  height: 100%;
  width: 100%; /* 若不需要占满宽度可改为auto，根据需求调整 */
  display: block; /* 消除行内替换元素默认的底部空白间距 */
  object-fit: cover; /* 保持图片比例填充容器，避免变形，不需要可删除 */
}

额外优化建议 #

你当前配置的grid-template-rows: 1fr 1fr 1fr定义了3行网格，但grid-template-areas只分配了2行的区域，若实际业务不需要第三行，可将行模板修改为grid-template-rows: 1fr 1fr，减少冗余配置。

内容的提问来源于stack exchange，提问作者jff