我可以将图像设置为网格项目吗？

Question

我有3个这样的元素网格：

现在我想用图像替换蓝色元素（可能只是虚拟图像） 。**

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(30em, auto);
  justify-items: stretch;
  align-items: stretch;
}

.grid-item-1 {
  background: url("https://editzstock.com/wp-content/uploads/2022/04/broken-text-300x300.png");
  background-size: cover;
  overflow: hidden;
}

.grid-item-2 {}

.grid-item-3 {
  grid-column: span 2;
  grid-row: span 1;
}

.grid-item {
  position: relative;
  font-size: 25px;
  padding: 20px;
  padding-top: 50px;
  background-color: #379AD6;
  color: #222;
  border: 1px solid white;
}

<div class="grid-container">
  <div class="grid-item grid-item-1">
  </div>
  <div class="grid-item grid-item-2">
  </div>
  <div class="grid-item grid-item-3"></div>
</div>

Answer 1

仅在过去7年中的经验中说，作为网格 /弹性物品的图像通常会以一种或另一种方式故障。

几乎总是通过将图像嵌套在容器中，使容器成为网格 / Flex项目，从而解决了小故障。

尽管图像作为网格 / flex项目有效，但直到各种浏览器在此问题上取得了更多进展之前，我建议您使用一个容器（从而将图像保持在块格式的上下文中）。