如何让嵌套在div中的图片填满页面剩余空间？
[英]How to make image nested in div fill the remaining space on the page?
问题描述
我正在学习 CSS，但在创建包含 header 和填充屏幕 rest 的图像的布局时遇到了困难。 使用以下代码，我能够实现我正在寻找的东西：
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>
现在的问题是，我想将图像元素包装到一个 div 中，因为我想 position 在图像顶部叠加。 一旦我将img嵌套在div中，调整大小就不再正常工作了。 如果屏幕很宽，图像会溢出到底部，形成一个垂直滚动条。
我已经尝试了很多东西，但到目前为止没有任何效果。 您能向我解释一下为什么引入div ( image-container ) 会改变布局，以及如何使其表现得像没有div的版本吗？ 那太好了，提前致谢！
编辑：
我希望图像的显示方式与我发布的片段中的完全一样。 它应该尽可能大，但只能大到整个图像仍然可见并且没有任何裁剪。 对于宽 window，图像的左右两侧应该有空白条。 对于窄而高的 window，图像上方/上方应该有空白条。
我的问题是，一旦我添加<div class="image-container"> ，图像总是占据整个宽度。 对于宽 window，我得到滚动条并且无法再看到整个图像。 我想知道如何在没有附加<div>的情况下使图像像在版本中一样缩放。 我还想了解为什么添加<div>会改变图像的缩放方式。
编辑 2：
有人建议添加overflow: hidden; 在.image-container上，但删除了他们的答案。 这确实有效（ overflow: hidden/scroll/auto;工作， overflow: visible;不），但现在我完全不明白为什么会这样。 我认为overflow会控制溢出是否可见，但不会影响显示内容的大小。 不过在这种情况下，似乎overflow属性确实对显示的图片大小有影响。 这很奇怪，如果有人知道发生了什么，请告诉我！
1 个解决方案
解决方案1
0 2023-01-27 16:21:24
Flex 已经在帮助图像占用尽可能多的空间，因此height: 100%和width: 100%导致图像变大。
为了让某些东西出现在图像之上，我建议查看position: absolute或position: relative
html, body { height: 100%; margin: 0; }.container { display: flex; flex-direction: column; height: 100%; }.image-container { display: flex; justify-content: center; } img { 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>
如何让 div 填充剩余的水平空间？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.