图像未显示在 Flex 容器中 [重复]答案

【问题标题】：Images not displaying in Flex Container [duplicate]图像未显示在 Flex 容器中 [重复]
【发布时间】：2018-02-24 23:54:33
【问题描述】：

我很难通过 css 将两个图像调用到它们的容器中。我已经重新创建了我在下面构建的网站的部分代码。

section 本身跨越 100% 的宽度。部分内的image containers 占100% 宽度各占50%，flex 占左右两侧。但是，当我调用图像时，什么都没有出现，而且我不确定我的代码的哪一部分阻碍了图像的显示，甚至阻碍了图像的显示。以下是我的代码：

main {
    height:100%;
    width: 100%;
    background-color: white;
}

.section {
    height: 100%;
    width: 100%;
}

.for-eduBusiness {
    height: 100%;
    width: 100%;
    min-height: 450px;
    border: 1px solid;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

.image-container-left {
  height: 100%;
  width: 50%;
  border: 1px solid red;
	flex: 0 0 auto;
	background: #ccc 
url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center;
	background-size: cover;
	
}

.image-container-right {
     height: 100%;
	flex: 0 0 auto;
  width: 50%;
  border: 1px solid red;
	background: #ccc url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center;
	background-size: cover;
}

<main>
	<div class="section for-eduBusiness">
		<div class="image-container-left"></div>
		<div class="image-container-left"></div>
	</div>
</main>

【问题讨论】：

将此添加到您的代码中：html, body { height: 100%; }

标签： html css flexbox

【解决方案1】：

将height: 100%; 添加到html, body 以为所有这些元素提供适当的高度参考，并移除 flex-wrap。

html, body {
  height: 100%;
}
main {
    height:100%;
    width: 100%;
    background-color: white;
}

.section {
    height: 100%;
    width: 100%;
}

.for-eduBusiness {
    height: 100%;
    width: 100%;
    min-height: 450px;
    border: 1px solid blue;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}

.image-container-left {
  height: 100%;
  width: 50%;
  border: 1px solid red;
	flex: 0 0 auto;
	background: #ccc 
url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center;
	background-size: cover;
	
}

.image-container-right {
     height: 100%;
	flex: 0 0 auto;
  width: 50%;
  border: 1px solid green;
	background: #ccc url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center;
	background-size: cover;
}

<main>
	<div class="section for-eduBusiness">
		<div class="image-container-left"></div>
		<div class="image-container-right"></div>
	</div>
</main>

顺便说一句：在你的第二个 DIV 中使用 image-container-right，而不是两次 image-container-left...

【讨论】：

【解决方案2】：

您发布的所有内容的高度均为 100%。链条上的东西必须有一个明确的高度设置才能工作。

Percentage Height HTML 5/CSS

【讨论】：

非常感谢！此刻你是我的英雄！
哦，伙计，我知道这种感觉。很高兴为您提供帮助！