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>

CSS网格中的响应式图像

1 个答案: