Question

我正在尝试创建一个响应式启动页面，该页面将覆盖视图中的大部分页面（90vh）。顶部有一个标识，底部有一个简单的段落。

我曾尝试使用flex-shrink和flex-basis，但它似乎不会以调整顶部图像大小的方式工作，并且不会使底部文本超出实际容器的大小。

我不确定我在这里缺少什么。当视图中的页面变得比较高时，感觉就像图像的大小以某种方式覆盖了flexbox。

这是一个jfiddle：https://jsfiddle.net/jtpetqtk/

＆＃13;

.splash-container{
	display: flex;
	height: 90vh;
	flex-direction: column;
	text-align: center;
	border: 10px solid goldenrod;
	justify-content: space-around;
}

.logo{
	background: red;
	img{
		max-width: 100%;
		max-height: 100%;
	}
}

.mission{
	background: yellow;
}

＆＃13;

<div class="splash-container">
		<div class="logo">
			<img src="http://www.ticotimes.net/wp-content/uploads/2016/01/150118Carrotandstick-800x800.jpg">
		</div>
		<div class="mission">
			<h1>Mission Statement</h1>
			<p>Our mission is to create a flexbox that doesn't break. It should be responive and contained in 90vh. </p>
		</div>
</div>

＆＃13;

Answer 1

我不确定你是否太容易修复，但你正在编写Scss而小提琴只显示CSS，所以img选择器永远不会工作。

如果切换到scss或将选择器更改为正确的css：

，它会起作用

.logo img { max-width: 100%; max-height: 80%; }

https://jsfiddle.net/jtpetqtk/2/

当窗口的宽度变大时，flexbox内部的图像会保持打破弹性框

1 个答案: