Why some of my images stop enlarging when resizing the browser window?-CodePudding

I used CSS Grid to create this, it is part of my website project but When I am resizing my browser window , it looks like the images of the shirt stop enlarging from a specific point , but when I shrink the browser windows everything works fine.I am very new to this and I already searched online but I could not figure it out. I would appreciate any help

.section {
  height: 100%;
  width: 100%;
  display: block;
}

.section.one {
  background-color: rgb(6, 65, 65);
}

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-column-gap: 1%;
  max-width: 70%;
  margin-top: 20%;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

.grid-container>div {
  display: grid;
  place-items: center;
}

.grid-container>div>.shirt {
  grid-area: 1/1;
  transition: .5s;
  transform-origin: center;
  display: grid;
  justify-items: center;
}

.grid-container>div>.art {
  grid-area: 1/1;
  transition: .5s;
  transform-origin: center;
  display: grid;
  justify-items: center;
}

.grid-container>div>.shirt>.slideup {
  max-width: 100%;
  /* controls the width of the shirt images */
}

.grid-container>div>.art>.scale {
  max-width: 50%;
  margin-top: -20%;
  margin-right: 5%
  /* controls the width of the art images  */
}

.grid-container div:hover .shirt {
  transform: scale(0);
}

.grid-container div:hover .art {
  transform: scale(2);
  transform-origin: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TEST</title>
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.css" integrity="sha512-NGRhMiWY9pf5z8PLens7/u LLwIPAu1dhJ7u9sHRWIo8TKrVbKiWlRdYRH3pVDCZA10zmobo PBLGeLOREklBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <div >
    <div>
      <div >
        <img src="https://i.imgur.com/oS8QWPI.png"  data-delay=".4s">
      </div>
      <div >
        <img src="https://i.imgur.com/jeNzULX.png"  data-delay="1s">
      </div>
    </div>

    <div>
      <div >
        <img src="https://i.imgur.com/oS8QWPI.png"  data-delay=".6s">
      </div>
      <div >
        <img src="https://i.imgur.com/jeNzULX.png"  data-delay="1.2s">
      </div>
    </div>

    <div>
      <div >
        <img src="https://i.imgur.com/oS8QWPI.png"  data-delay=".8s">
      </div>
      <div >
        <img src="https://i.imgur.com/jeNzULX.png"  data-delay="1.4s">
      </div>
    </div>
  </div>
</body>

CodePudding user response：

It looks like the shirt img doesn't fully cover the size of the grid area, which allows the other image to further scale (if that makes sense.. maybe you see what I mean when you inspect the elements in your browser).

You can fix this by adding {width: 100%} to .grid-container>div, .grid-container>div>.shirt and .grid-container>div>.shirt>.slideup. This makes sure the img is the size of the grid, in this case it makes the img larger. If you liked the smaller shirts better, you should increase your grid-column-gap on the .grid-container.

CodePudding user response：

Your png file which contains the shirt is only 300x352px large. It won't get larger than this with the methods you use. Use a larger image file to avoid this.