CSS Grid页面中衬衫图片调整浏览器窗口时放大受限问题咨询

你的问题出在衬衫图片的尺寸限制逻辑上：.slideup类仅设置了max-width:100%，这意味着图片最大只能显示自身原始尺寸——当父容器宽度超过图片原始宽度后，图片就不会再跟着窗口放大；而缩小窗口时，父容器宽度小于图片原始尺寸，max-width:100%会让图片自适应缩小，因此缩小功能正常。

解决方案 #

给.slideup类添加width:100%，强制图片拉伸填满父容器宽度，即可随窗口放大继续增大：

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

补充说明 #

• width:100%让图片宽度始终匹配父容器，不受自身原始尺寸限制
• max-width:100%保留了窗口缩小时图片自适应缩小的功能
• 若担心图片拉伸变形，建议使用SVG矢量图或高分辨率图片，避免放大后模糊

修改后的完整CSS代码 #

.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 {
  width: 100%; /* 新增 */
  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;
}

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