CSS Grid 中的响应式图像

Question

我正在尝试在 CSS Grid 中放置一些图片并使其具有响应性，我有一个包含 4 个图像的 div，并将其放入 CSS 网格布局中。我希望他们占用可用空间，但不要离开屏幕。随着屏幕变小，我还想让它们调整大小甚至堆叠。我不知道该怎么做。我曾尝试将 Flexbox 和 Grid 结合起来，但无济于事。 如何让它们调整大小并占用空间？

CodePen Food Grid

<div class="food-container">
    <img class="food-pic food4" src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4fa061122a5ce899fcb5454dae8dbe99&auto=format&fit=crop&w=2850&q=80" alt="">
    <img class="food-pic food2" src="https://images.unsplash.com/photo-1504544750208-dc0358e63f7f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=be3aa106f944edc77c68fcd567c22bbb&auto=format&fit=crop&w=750&q=80" alt="">
    <img class="food-pic food3" src="https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9f2d35c4ea30a81e428e66c653748f91&auto=format&fit=crop&w=642&q=80" alt="">
    <img class="food-pic food1" src="https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86c8c1fd5e9e5b384696472a095c42ac&auto=format&fit=crop&w=1650&q=80" alt="">
</div>


body {
  margin: 0;
  box-sizing: border-box
}

.food-container {
  height: 40em;
  display: grid;
  grid-template: 2fr 2fr / 2fr 1fr 1fr;
  grid-auto-flow: row;
  grid-gap: 1em;
  padding: 1em;
}

.food-pic {
  width: auto;
  height: 100%;
  overflow: hidden;
}

.food1 {
  grid-row: 1 / 3;
}

.food 2 {
  grid-column: 2 / 4;
}

.food3 {
  grid-column: 3 / 4;
}

.food4 {
  grid-column: 2 / 4;
}

Answer 1

我对您的 html 和 CSS 进行了一些更改，以尝试使用 grid-template-areas，因为您了解每个元素的正确位置可能更简单。

我所做的最大改变是围绕每个图像创建一个 div 以更好地控制它们。在您的 imgs 标签中设置的属性object-fit:cover; 完成了这项工作。

body {
  margin: 0;
  box-sizing: border-box
}

.food-container {
  max-height: 40em;
  display: grid;
  grid-template: 2fr 2fr / 2fr 1fr 1fr;
  grid-gap: 1em;
  padding:1em;
  grid-template-areas:
  "a d d"
  "a b c"
}

.food1 {
  grid-area: a;
}

.food2 {
  grid-area: b;
}

.food3 {
  grid-area: c;
}

.food4 {
  grid-area: d;
}

.food-container div{
  overflow:hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit:cover;
}

<div class="food-container">
  <div class="food1">
    <img  src="https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86c8c1fd5e9e5b384696472a095c42ac&auto=format&fit=crop&w=1650&q=80" alt="">
  </div>
  <div class="food2">
    <img  src="https://images.unsplash.com/photo-1504544750208-dc0358e63f7f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=be3aa106f944edc77c68fcd567c22bbb&auto=format&fit=crop&w=750&q=80" alt="">
  </div>
  <div class="food3">
    <img  src="https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9f2d35c4ea30a81e428e66c653748f91&auto=format&fit=crop&w=642&q=80" alt="">
  </div>
  <div class="food4">
    <img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4fa061122a5ce899fcb5454dae8dbe99&auto=format&fit=crop&w=2850&q=80" alt="">
  </div>
</div>