css - 如何将图像放在第 1 行的末尾和第 2 行的开头？

Question

这是我能提供的最好的预览。如果可能的话，我想用 CSS Grid Layout 做一些完全像这样的事情。我也希望它能够响应。这是开始代码:

.wrapper { 
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1em;
}

.background-image {
  grid-column: 1 / -1;
}

.image {
  grid-column: 2 / span 3;
}

现在我以多种方式尝试了 grid-template-rows 和 grid-row 但我无法让它工作。也许您可以做的第一件事就是尝试固定行，如下所示:

grid-template-rows: 200px 200px 1fr

然后做

.background-image {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.image {
  grid-column: 2 / span 3;
  grid-row: 2;
}

这是一个 JSFiddle:https://jsfiddle.net/b5aujgq7/1/

但是因为我希望它在屏幕变小时响应，所以 background-image 变小了，200px 不再有效，因为它太大了。我需要前 2 行是 fr 以便它们与图像具有相同的高度。

我想我有一个解决方案，但我不知道如何实现:将第 1 行设为其内容(背景图像)的 70%。

有谁知道我怎样才能让它工作？

Answer 1

为什么不只定义 4 行，将前 2 行分配给背景，将第 3 行和第 4 行分配给图像？

#main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat (4, 1fr);
  grid-column-gap: 1em;
}

.background-image {
  width: 100%;
  grid-column: 1 / -1;
  grid-row: 1 / 3;
}

.image {
  width: 100%;
  grid-column: 2 / span 3;
  grid-row: 2 / 4;
}

<section id="main">
  <img class="background-image" src="https://image.tmdb.org/t/p/w1400_and_h450_bestv2/askg3SMvhqEl4OL52YuvdtY40Yb.jpg">
  <img class="image" src="https://image.tmdb.org/t/p/w342/eKi8dIrr8voobbaGzDpe8w0PVbC.jpg">
</section>