html - 带有背景图像的空子 div 占据父 div 高度的 100%

Question

发现强制子 div 占据其背景图像的完整高度并不是一件容易的事。 有六个强制性条款:

1. 两个 div 的确切高度均未知
2. 子 div 为空
3. 背景图片大小:封面
4. 显示:flex
5. 没有 JavaScript
6. 这是一个列表项(因此不能全屏)

.item { 
  display: flex; 
  border: 1px solid red; 
  height: 100%; 
}
.inner { 
  background: url('https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80') center center / cover no-repeat; 
  border: 1px solid blue;
  width: 100%;
  height: 100%;
}

<div class='item'>
  Inner content
  <div class='inner'></div>
</div>

在 SO 上发现的所有类似问题均未通过全部或部分条款。
如果您有任何想法(尤其是来自网格专家的想法)，我们将不胜感激。

Answer 1

要让图像确定内部 div 的高度(就像它是 元素一样)，请使用它。

.item { 
  display: flex; 
  border: 1px solid red; 
  height: 100%; 
}

.inner { 
  border: 1px solid blue;
}

.inner::before {
  font-size:0;
  content: url('https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80');
  display:block;
}

<div class='item'>
  <div class='inner'></div>
</div>

请注意，这回答了问题正文第一句中的问题，与标题中的问题不同。