Html 空的子div，背景图像占父div高度的100%

发现强制子div获取其背景图像的全部高度并不是一件容易的任务。 共有六项强制性条款：

两个分区的确切高度未知

子div为空

背景图像大小：

封面

display:flex

没有javascript

它是一个列表项（因此没有全屏显示）

.item{
显示器：flex；
边框：1px纯红；
身高：100%；
}
.内部{
背景：url（'https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80’）中心/盖不重复；
边框：1px纯蓝色；
宽度：100%；
身高：100%；
}

内在内容

要让图像确定内部div的高度（就像它是一个元素一样），请使用此选项

.item{
显示器：flex；
边框：1px纯红；
身高：100%；
}
.内部{
边框：1px纯蓝色；
}
.内部：：之前{
字号：0；
内容：url（'https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80’；
显示：块；
}

使用

高度：100vh

用于

项目

？第六个术语：无全屏：）然后你想要的不是背景图像，而是确认你想要图像的图像；）因为它是空的，所以你可以把图像放在里面，图像将定义高度。更重要的是解释你想要实现什么，而不是列出一系列不可能实现的要求。你可能处理这个问题的方法不对。@Igniter，你看，这是结尾的一个图像；）没有背景，也没有封面rule@Igniter是的，这仍然是不可能的。。在这个解决方案（这是逻辑解决方案）中，子对象不是空的（没有规则2），也没有背景大小：cover（没有规则3）。。。那么，为什么不简单地在HTML中添加图像呢？这比使用CSS包含图像要容易得多？@Temaniaff如果你必须了解，在很多情况下，最合乎逻辑的解决方案是不可能的。假设HTML无法更改，而JavaScript是不可能的。有些CMSE有这些限制！那么唯一的出路就是尝试CSS。@李斯特先生我完全理解这一点，这就是为什么这些细节需要属于这个问题的原因。OP说我想使用背景图像，我需要父元素来考虑它的高度-->我们都知道这是不可能的。但是，如果OP说我想添加图像，但我无法更改HTML，那么情况就不同了，我们可以找到很多解决方法（您的解决方案证实了这一点），这就是为什么我要问这背后的目标是什么；）