我正在学习CSS，但在创建一个包含页眉和填充屏幕其余部分的图像的布局时遇到了麻烦。使用下面的代码，我能够实现我所寻找的：
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<!-- <div class="image-container"> -->
<img src="https://picsum.photos/500/300"/>
<!-- </div> -->
</div>
</body>
</html>现在的问题是，我想把图像元素 Package 成一个div，因为我想在图像的顶部放置一个覆盖层。一旦我把img嵌套在div中，调整大小就不能正常工作了。如果屏幕很宽，图像就会溢出到底部，产生一个垂直滚动条。
我已经尝试了很多方法，但到目前为止都没有效果。你能解释一下为什么引入div（image-container）会改变布局，以及如何让它像没有div的版本一样工作吗？那太好了，提前感谢!
- 编辑：**
我希望图像显示完全一样，在我张贴的片段。它应该尽可能大，但只有这么大，整个图像仍然可见，没有裁剪。对于一个宽窗口，应该有空白栏左右的图像。对于一个狭窄的，但高窗口，应该有空白栏以上/以外的图像。
我的问题是，一旦我添加了<div class="image-container">，图像总是占据整个宽度。对于宽窗口，我得到滚动条，不能再看到整个图像。我想知道我如何才能让图像缩放像在版本中没有额外的<div>。我还想知道为什么添加<div>改变图像缩放方式。
- 编辑2：**
有人建议在.image-container上添加overflow: hidden;，但是删除了他们的答案。（overflow: hidden/scroll/auto;可以，overflow: visible;不行），但是现在我完全搞不懂为什么会这样，我以为overflow可以控制溢出是否可见，但是不会影响显示内容的大小，但是在这种情况下，看起来overflow属性确实对显示的图片大小有影响。这很奇怪，如果有人知道发生了什么，请告诉我!
1条答案
按热度按时间bvk5enib1#
Flex已经帮助映像尽可能多地占用空间，因此
height: 100%和width: 100%导致映像增长。为了让某些内容显示在图像的顶部，我建议使用looking into
position: absolute或position: relative