Make image in responsive CSS grid expand as well as shrink

Question

First I realize there are lots of similar questions on StackOverflow, but they are not the same as mine. I have been trying for days to get the exact behavior I need. There is just one thing that doesn't work, I cannot get my image to expand to fill the available space.

When I shrink the window the image shrinks the way I want.

But when I expand the picture stops expanding at its natural size whereas I want it to fill its grid area.

My requirements are that:-

1. Everything in the grid resizes dynamically to fit within the browser window with no scroll bars appearing.
2. The picture maintains its aspect ratio and takes the maximum amount of horizontal and vertical space available as provided by the grid.
3. The picture can be animated in css.
4. I note that I may not have set the grid up properly and the picture may be filling the grid area, in which case how do I make the grid area larger. Roughly I want the image to be the large central element of the page and the text and label to be peripheral.

My html and CSS is included below.

*,
*.before,
*.after {
  margin     : 0px;
  padding    : 0px;
  box-sizing : border-box;
  }
html {
  font-family : sans-serif;
  font-size   : 10px;
  }
body {
  display        : flex;
  flex-direction : column;
  width          :100%;
  height         :100vh;
  border         : 0rem solid transparent;
  }
.byx-main {
  background-color : white;
  }
.byx-page {
  display               : grid;
  grid-template-columns : repeat(5, 1fr);
  grid-template-rows    : 1fr;
  grid-gap              : 0rem;
  gap                   : 0rem;
  }
.byx-picture { 
  grid-column     : 1 / 6;
  grid-row        : 1;
  display         : flex; 
  justify-content : center;
  align-items     : center;
  position        : relative;
  width           : 100vw; 
  height          : 100vh;
  object-fit      : contain;
  }
.byx-text { 
  grid-column      : 4 / 6;
  grid-row         : 1;
  display          : flex; 
  justify-content  : flex-end;
  align-items      : flex-start;
  border           : 0px solid gray;
  text-align       : right;
  color            : black;
  font-size        : 2vw;
  background-color : transparent;
  z-index          : 100;
  }
.byx-label { 
  grid-column      : 1 / 3;
  grid-row         : 1;
  display          : flex; 
  justify-content  : flex-start;
  align-items      : flex-end;
  border           : 0px solid gray;
  text-align       : left;
  color            : darkcyan;
  font-size        : 5vw;
  font-weight      : bold;
  background-color : transparent;
  z-index          : 100;
  }
.byx-img { 
  max-width  : 100%; 
  max-height : 100%;
  object-fit : contain;
  }
.hidden {
  display : none;
  } 

<main class="byx-main">
  <section id="00" class="byx-page">
    <div class="byx-picture byx-anim-enter-top-left">
      <img class="byx-img" src="https://cdn.sstatic.net/Sites/stackexchange/Img/apple-touch-icon@2.png">
    </div>
    <div class="byx-label">
      <p>The Label</p>
    </div>
    <div class="byx-text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
  </section>
</main>

Answer 1

The requirement is for the image to be behind the texts and as large as possible.

Essentially, it is to act like a background image to the whole page. It is not an intrinsic part of the grid.

If we remove the img element and instead put it as an background image to a pseudo element on the page, giving page full height, the image can be made as large as possible by using background-image contain, as with the object-fit in the original but now it will have the whole page space to expand into without any concerns about how the other grid items are going to fit in.

We can also remove the z-indexes on the text items.

Updated to pseudo element so as to deal with additional animation requirement.

*,
*.before,
*.after {
  margin     : 0px;
  padding    : 0px;
  box-sizing : border-box;
  }
html {
  font-family : sans-serif;
  font-size   : 10px;
  }
body {
  display        : flex;
  flex-direction : column;
  width          :100%;
  height         :100vh;
  border         : 0rem solid transparent;
  }
.byx-main {
  background-color : white;
background-color: transparent;
  }
.byx-page {
  height: 100vh;
  display               : grid;
  grid-template-columns : repeat(5, 1fr);
  grid-template-rows    : 1fr;
  grid-gap              : 0rem;
  gap                   : 0rem;
}
.byx-page::before {
z-index: -1;
 content: "";
 position: absolute;
 top: 0;
left: 0;
width: 100vw;
height: 100vh;
  background-image: url(https://cdn.sstatic.net/Sites/stackexchange/Img/apple-touch-icon@2.png);
      background-size: contain;
      background-repeat: no-repeat no-repeat;
      background-position: center center;
      animation-name: turn;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      animation-timing-function: linear;
  }
@keyframes turn {
      from {
          transform: rotate(0deg);
}
       to {
           transform: rotate(360deg);
}
}
.byx-text { 
  grid-column      : 4 / 6;
  grid-row         : 1;
  display          : flex; 
  justify-content  : flex-end;
  align-items      : flex-start;
  border           : 0px solid gray;
  text-align       : right;
  color            : black;
  font-size        : 2vw;
  background-color : transparent;
  }
.byx-label { 
  grid-column      : 1 / 3;
  grid-row         : 1;
  display          : flex; 
  justify-content  : flex-start;
  align-items      : flex-end;
  border           : 0px solid gray;
  text-align       : left;
  color            : darkcyan;
  font-size        : 5vw;
  font-weight      : bold;
  background-color : transparent;
  }
.hidden {
  display : none;
  }

<main class="byx-main">
  <section id="00" class="byx-page">
    <div class="byx-picture byx-anim-enter-top-left">
    </div>
    <div class="byx-label">
      <p>The Label</p>
    </div>
    <div class="byx-text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
  </section>
</main>

Answer 2

To increase the picture size to cover as much blanc space. Just include width: 100%; in your image class as below, that should fix it. However it will extend a little to other areas as well. But always within the window, so should be fine.

In the styles:

.byx-img { 
  width: 100%; /*Include this line*/
  max-width: 100%; 
  max-height: 100%;
  object-fit: contain;
 }

Hope this solves your question. If have any other let me know. Good Luck