css 为什么在调整浏览器窗口大小时某些图像停止放大？

iqxoj9l9 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(1054)

我用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 {
  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 class="grid-container ">
    <div>
      <div class="shirt">
        <img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".4s">
      </div>
      <div class="art">
        <img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1s">
      </div>
    </div>

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

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

css

来源：https://stackoverflow.com/questions/74787278/why-some-of-my-images-stop-enlarging-when-resizing-the-browser-window

2条答案

按热度按时间

pjngdqdw1#

看起来衬衫img没有完全覆盖网格区域的大小，这使得其他图像可以进一步缩放（如果这有意义的话......当你在浏览器中检查元素时，也许你会明白我的意思）。
您可以通过添加{width：100%}到.grid-container〉div、.grid-container〉div〉.shirt和.grid-container〉div〉.shirt〉. slideup。这确保img是网格的大小，在这种情况下，它使img更大。如果你更喜欢小的衬衫，你应该在.grid-container上增加你的grid-column-gap。

赞(0）回复(0）举报 2022-12-15

u5rb5r592#

包含衬衫的png文件只有300x352px大。使用你的方法不会比这个大。使用更大的图像文件来避免这种情况。

赞(0）回复(0）举报 2022-12-15