我正在尝试使用 flexbox 来制作响应式布局。很简单，我试图让图像位于 this example 的中心表现得像this example当浏览器窗口的高度和宽度被操纵时。
这两个示例几乎相同，只是在第一个示例中添加了一个具有设定高度的蓝色横幅。绿色横幅需要占据剩余的垂直空间，图像需要尊重绿色横幅的高度。
*注意:蓝色横幅的高度是动态的，在页面呈现之前我不知道高度是多少。它在 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;
}
最佳答案
你也可以使用 flex 作为图像包装器，你可以将图像设置在绝对位置以避免看到它缩小:
.imageWrapper {
height: 100%;
width: 100%;
display:flex;
img {
max-height:100%;
max-width:100%;
/* cure shrinking effect */
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
/* end cure shrinking effect */
margin:auto;
}
}
关于html - Flexbox child 不尊重其 parent 的边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37665822/