我想用flexbox实现响应式布局。简单来说,当浏览器窗口的高度和宽度发生变化时,我想让这个示例中的图片表现得像这个示例。
这两个示例基本相同,只是第一个示例添加了一个设置高度的蓝色横幅。绿色横幅需要占据剩余的垂直空间,而图片需要遵守绿色横幅的高度。
*注意:蓝色横幅的高度在某种程度上是动态的,即在页面呈现之前我不知道其高度。在示例中将其硬编码为200px以使示例正常运行。
非常感谢您的帮助。
代码示例:
这两个示例基本相同,只是第一个示例添加了一个设置高度的蓝色横幅。绿色横幅需要占据剩余的垂直空间,而图片需要遵守绿色横幅的高度。
*注意:蓝色横幅的高度在某种程度上是动态的,即在页面呈现之前我不知道其高度。在示例中将其硬编码为200px以使示例正常运行。
非常感谢您的帮助。
代码示例:
<html>
<body>
<div class="wrapper">
<div class="imageWrapper">
<img src="http://fpoimg.com/1000x800">
</div>
</div>
<div class="stacksWrapper"></div>
</body>
</html>
* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
html {
margin:0;
padding:0;
height:100%;
width: 100%;
}
body {
margin:0;
padding:0;
background:red;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.wrapper {
width: 100%;
text-align: center;
background: green;
flex: 1;
flex-basis: 0;
min-height: 0;
position: relative;
}
.imageWrapper {
height:100%;
width: 100%;
img {
max-height:100%;
max-width:100%;
width: auto;
}
}
.stacksWrapper {
height: 200px;
width: 100%;
background-color: blue;
}