为什么更改 css 网格中的图像大小会产生填充？

Question

我正在创建投资组合，我在那里有项目部分。我有图片 css 网格，它可以工作，但图片太大 so i want them smaller, but when i change max-width or set width on image lower it create padding ，我该如何解决？我不希望网格中的图像之间有填充。感谢您的任何建议！

.mygrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.mygrid img {
  max-width: 75%;
  border: 1px solid green;
}

        <div class="mygrid mt-6">
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
        </div>

Answer 1

您可以使用 grid-template-columns: repeat(3, fit-content(100%)); 而不是 grid-template-columns: repeat(3, 1fr);，这样每一列都适合图像大小。

Answer 2

当您说 75% 时，这意味着无论配置如何，您都将获得 25% 的免费 space，因此请不要玩弄图像大小。调整列大小：

.mygrid {
  display: grid;
  grid-template-columns: repeat(3, 25%); /* adjust here */
  justify-content: center;
}

.mygrid img {
  max-width: 100%; /* keep 100% here */
  border: 1px solid green;
}

<div class="mygrid mt-6">
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
</div>

为什么更改 css 网格中的图像大小会产生填充？

Why does changing the image size in css grid create padding?

html

css

grid