为带background-image的div添加外层容器后图片消失的解决方法

核心原因 #

当.img使用百分比高度时，它的高度计算必须依赖父元素的明确高度值。直接放在.container中时，.container有100vh的明确高度，.img的50%能正常计算为视口高度的一半；但添加.images_wrapper这个Flex容器后，它的默认高度是auto（由子元素撑开），而子元素.img的高度又依赖父容器的高度，形成循环依赖，导致.img高度为0，.images_wrapper也没有高度，背景图自然无法显示。

可行解决方案 #

方案一：让外层容器继承父级高度

给.images_wrapper添加height: 100%，使其高度与.container一致，这样.img的百分比高度就有了计算基准，同时保留Flex布局的居中效果：

.container {
  height: 100vh;
  width: 100%;
}

.img {
  background-image: url('https://images.pexels.com/photos/14641908/pexels-photo-14641908.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: 50%;
  width: 50%;
  height: 50%;
  background-repeat: no-repeat;
}

.images_wrapper {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  align-items: center;
  height: 100%; /* 新增：继承container高度 */
}

方案二：让图片高度直接基于视口

把.img的height: 50%改为height: 50vh，绕过父容器的高度依赖，.images_wrapper会被.img自动撑开，无需指定自身高度：

.container {
  height: 100vh;
  width: 100%;
}

.img {
  background-image: url('https://images.pexels.com/photos/14641908/pexels-photo-14641908.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: 50%;
  width: 50%;
  height: 50vh; /* 替换为视口单位 */
  background-repeat: no-repeat;
}

.images_wrapper {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  align-items: center;
}

方案三：用CSS变量统一控制高度

在.container中定义高度变量，让.img直接引用该变量计算高度，既保留百分比的灵活性，又确保基于.container的高度：

.container {
  height: 100vh;
  width: 100%;
  --container-height: 100vh; /* 定义容器高度变量 */
}

.img {
  background-image: url('https://images.pexels.com/photos/14641908/pexels-photo-14641908.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: 50%;
  width: 50%;
  height: calc(var(--container-height) * 0.5); /* 基于变量计算高度 */
  background-repeat: no-repeat;
}

.images_wrapper {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  align-items: center;
}

内容的提问来源于stack exchange，提问作者pileup