Div BG img filling a width and height of a cell div parent

Question

I took a look at several inherent questions, without finding a solution to the problem I ran into;

The question that comes closest is this one but it doesn't work for me since it uses table and not a grid responsive layout.

What I am trying to achieve would be a grid where the first cell has a child that should fully cover the height and width of the parent cell as in the picture

.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;
}

<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>

Answer 1

If you use fixed sizes, like width: 50vw and height: 3vh, also height: 134vh; you are generating a fixed layout in some way. You must have to generate a really responsive layout to get accurate display in every screen, don't use fixed sizes (only in certain cases).

Try this approach, less code, less rigid, more responsive, more accurate.

Happy coding!

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  font-size: 2rem;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 1 / 2 / 4 / 3;
}

.div3 {
  grid-area: 2 / 1 / 4 / 2;
}

.bio {
    background-color: grey;
}

.roles {
   background-color: #913131;
}

.picture {
  background-image: url('https://i.ibb.co/xf8c0rS/lios-labs-151.jpg');
  background-attachment: local;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="parent">
  <div class="div1 picture"></div>
  <div class="div2 bio">
    <ul>
      <li>Jo is an artist-curator, cultural ecologist and community weaver born in Poland. Dancing through life</li>
    </ul>
  </div>
  <div class="div3 roles">
    <ul>
      <li>Roles: Board member...</li>
    </ul>
  </div>
</div>