如何让Grid布局中Div背景图片填满父单元格宽高？

问题描述 #

我查阅了多个相关问题，但未找到所遇问题的解决方案；最接近的方案使用table而非响应式Grid布局，并不适用。我想要实现的是一个Grid布局，其中第一个单元格的子元素应完全覆盖父单元格的宽高，效果如图所示：

原代码 #

CSS #

.InAgent{
    display: grid;
    grid-template-columns: repeat(2fr, 1fr) ;
    grid-template-rows: auto auto;
    word-wrap: break-word;
    place-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1500;
    height: 134vh;
    font-size: 2rem;
    position: relative;
    overflow: hidden;
    min-height: fit-content;
    justify-items: stretch;
}  

.pic { 
    grid-area: 1 / 1 / 2 / 2; 
    justify-content: center;
    align-items: center;
    place-items: center;  
    margin: 0 auto;
}

.roles { 
    grid-area: 2 / 1 / 3 / 2; 
    background-color: #913131;
}

.bio { 
    background-color: grey;
    grid-area: 1 / 2 / 3 / 3; 
}

.PrJojo{
    width: 50vw;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://i.ibb.co/xf8c0rS/lios-labs-151.jpg');
    background-attachment: local;
    background-position: center;
    background-repeat: no-repeat;
}

HTML #

<section class="InAgent" id="InJojo">
 
  <div class="pic">
    <div class="PrJojo"></div>
  </div>
  
  <div class="roles">
    <ul>Roles: Board member...
    </ul>
  </div>
  
  <div class="bio"> 
    <ul>Jo is an artist-curator, cultural ecologist and community weaver born in Poland. Dancing through life
    </ul>
  </div>
  
</section>

解决方案 #

关键修改点：

• 修正grid-template-columns的错误写法：原repeat(2fr, 1fr)不符合语法，改为1fr 1fr实现两列等宽
• 让.pic占满网格单元格：添加width: 100%; height: 100%;，移除margin: 0 auto避免限制宽度
• 让.PrJojo完全覆盖父元素：去掉固定宽高，改为width: 100%; height: 100%;，并添加background-size: cover;确保背景图铺满容器

修改后的完整代码：

CSS #

.InAgent{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 修正列布局写法 */
    grid-template-rows: auto auto;
    word-wrap: break-word;
    place-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1500;
    height: 134vh;
    font-size: 2rem;
    min-height: fit-content;
    justify-items: stretch;
}  

.pic { 
    grid-area: 1 / 1 / 2 / 2; 
    width: 100%; /* 占满单元格宽度 */
    height: 100%; /* 占满单元格高度 */
    display: flex; /* 保持子元素居中能力（可选） */
    justify-content: center;
    align-items: center;
}

.roles { 
    grid-area: 2 / 1 / 3 / 2; 
    background-color: #913131;
}

.bio { 
    background-color: grey;
    grid-area: 1 / 2 / 3 / 3; 
}

.PrJojo{
    width: 100%; /* 覆盖父元素宽度 */
    height: 100%; /* 覆盖父元素高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://i.ibb.co/xf8c0rS/lios-labs-151.jpg');
    background-attachment: local;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* 背景图铺满容器 */
}

HTML #

<section class="InAgent" id="InJojo">
 
  <div class="pic">
    <div class="PrJojo"></div>
  </div>
  
  <div class="roles">
    <ul>Roles: Board member...
    </ul>
  </div>
  
  <div class="bio"> 
    <ul>Jo is an artist-curator, cultural ecologist and community weaver born in Poland. Dancing through life
    </ul>
  </div>
  
</section>

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