HTML CSS 图像库不能用自动或拉伸(stretch)制作正方形

Question

我想创建一个 2 列 3 行图像方形图像库。由于某种原因，在编写代码时，框的高度未填满网格。如何使图像的高度与宽度成正方形？下面的代码、CSS 和 HTML。图片应边对边接触，并且如果可能，希望避免命名像素大小。没有拉伸(stretch)属性或其他东西吗？试图让它发挥作用，

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0;
  padding: 0px;
}

img {
  width: 100%;
  height: auto;
  padding: 0px;
}

<div class="grid-container">
  <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
  <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
  <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
  <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
  <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>

Answer 1

如果要填满框的高度。您应该对网格容器使用 align-items "stretch"属性。

.grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);.
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0;
        padding: 0px;
        align-items: stretch;
    }

演示 Code