2

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

.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>

4

3 回答 3

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;
    }

演示代码

于 2019-07-01T04:58:45.123 回答
0

尝试以下代码。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
	
img {
    width: 100%;
    height: 140px;
}
<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>

还要确保使用相同尺寸的图像，以防您想使用height:auto

于 2019-07-01T04:56:09.560 回答
0

这是您的解决方案，当您调整窗口大小时，图像将自动调整大小。

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0;
    padding: 0px;
    align-items: stretch; /* Default. Items are stretched to fit the container */
}

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>

这是你的源链接 你的源代码

于 2019-07-01T06:13:15.157 回答