在CSS网格中控制响应网格-区域高度

Question

我试图使用CSS网格制作响应性图像库，但是我有一个调整大小的问题。

​

​

我希望更大的图像是行的最大高度，但当调整大小窗口时，较小的图像扩展网格，因为在图像上是可见的。

我怎样才能做到这一点？

​

.container {
  margin: 0 auto;
}

.gallery-areas {
  display: grid;
  grid-gap: 30px;
  grid-template-areas: "big-image-1 big-image-2 small-image-1 small-image-2" "big-image-1 big-image-2 small-image-3 small-image-4"
}

.image-1 {
  grid-area: big-image-1;
}

.image-2 {
  grid-area: big-image-2;
}

.image-3 {
  grid-area: small-image-1;
}

.image-4 {
  grid-area: small-image-2;
}

.image-5 {
  grid-area: small-image-3;
}

.image-6 {
  grid-area: small-image-4;
}

img {
  width: 100%;
}

<div class="container">
  <section class="gallery">
    <div class="gallery-areas">
      <img class="image-1" src="https://dummyimage.com/389x435/000/fff" alt="">
      <img class="image-2" src="https://dummyimage.com/389x435/000/fff" alt="">
      <img class="image-3" src="https://dummyimage.com/389x201/000/fff" alt="">
      <img class="image-4" src="https://dummyimage.com/389x201/000/fff" alt="">
      <img class="image-5" src="https://dummyimage.com/389x201/000/fff" alt="">
      <img class="image-6" src="https://dummyimage.com/389x201/000/fff" alt="">
    </div>
  </section>
</div>

​

Answer 1

我理解你的问题的方式是，当屏幕变小时，你想要使更大的图像与较小的图像对齐。

问题是，您的图像宽度是100%，所以当屏幕较小时，高度(Auto)会更短，因为您的图像已经达到100%的标记。

我更新了图像1和2到100%的高度，并将max-width of img设置为100%，而不是使用100%的宽度。这样，较大的图像就可以有100%的高度，仍然有适当的比例，因为宽度是默认的自动。

​

.container {
  margin: 0 auto;
}

.gallery-areas {
  display: grid;
  grid-gap: 30px;
  grid-template-areas: "big-image-1 big-image-2 small-image-1 small-image-2" "big-image-1 big-image-2 small-image-3 small-image-4"
}

.image-1 {
  grid-area: big-image-1;
}

.image-2 {
  grid-area: big-image-2;
}

.image-3 {
  grid-area: small-image-1;
}

.image-4 {
  grid-area: small-image-2;
}

.image-5 {
  grid-area: small-image-3;
}

.image-6 {
  grid-area: small-image-4;
}

img {
  max-width: 100%;
}
.image-1, .image-2 {
  height: 100%;
}

<div class="container">
  <section class="gallery">
    <div class="gallery-areas">
      <img class="image-1" src="https://dummyimage.com/389x435/000/fff" alt="">
      <img class="image-2" src="https://dummyimage.com/389x435/000/fff" alt="">
      <img class="image-3" src="https://dummyimage.com/389x201/000/fff" alt="">
      <img class="image-4" src="https://dummyimage.com/389x201/000/fff" alt="">
      <img class="image-5" src="https://dummyimage.com/389x201/000/fff" alt="">
      <img class="image-6" src="https://dummyimage.com/389x201/000/fff" alt="">
    </div>
  </section>
</div>

​