如何让图片在100vh容器中自动占据剩余可用空间？

完全可以用纯CSS实现，不需要JavaScript。借助Flex布局就能轻松实现文本占自身所需空间、图片填充容器剩余空间的效果，具体修改如下：

修改后的CSS代码 #

.container {
    height: 100vh;
    max-height: 100vh;
    background-color: #CCCCCC;
    /* 核心：设置为垂直方向的Flex容器 */
    display: flex;
    flex-direction: column;
    /* 防止内容超出容器范围 */
    overflow: hidden;
}

img {
    width: 100%;
    object-fit: cover;
    object-position: center -180px;
    /* 核心：让图片占据容器剩余空间 */
    flex: 1;
    max-height: 100%;
}

.text-wrapper {
    padding-left: 15px;
    /* 文本部分自动占据自身所需高度，无需额外设置 */
}

对应的HTML代码（无需修改） #

<div class="container">
    <img src="https://img.100r.systems/img/be10bc26de653473f80b4348addfc6b5.jpg">
    <div class="text-wrapper">
        <h1>Some Text goes here</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <br>invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
</div>

关键说明 #

• 给.container添加display: flex; flex-direction: column;后，容器内元素会垂直排列。
• 给img设置flex: 1，它会自动填充容器中除文本部分外的所有剩余空间，不管文本高度如何变化，图片都会自适应调整。
• 保留object-fit: cover确保图片在自适应高度时不会变形，object-position可继续控制图片的显示位置。

内容的提问来源于stack exchange，提问作者Phillip