如何让<img>自动收缩避免纵向溢出，确保所有<p>元素完整可见

我有3年前端开发经验，至今没解决这个布局问题：页面空间不足时，让<img>元素按比例收缩，避免纵向溢出，同时保证所有<p>元素完整可见。我做了最小复现示例，在iPhone SE（375x667）屏幕下，纵向溢出明显，只能看到第8个<p>，后面的内容被遮挡。

需求细节 #

• 所有<p>元素必须完整显示，无纵向溢出；
• 空间不足时<img>按比例收缩（试过object-fit: contain没用）；
• <img>要在剩余空间内水平、垂直居中；
• 优先用不依赖视口单位的方案（实际页面有其他元素，视口单位容易冲突），必要时也可以用。

我试过height:100vh、flexbox、flex-grow、grid等方案，都没生效。

复现代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Image and Div Layout</title>
        <style>
            body {
                margin: 0;
            }

            .container {
                max-height: 100vh;
            }

            .container img {
                max-width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="https://wallpapercave.com/dwp2x/wp4471355.jpg" alt="Image">
            <div>
                <p>1Your content here</p>
                <p>2Your content here</p>
                <p>3Your content here</p>
                <p>4Your content here</p>
                <p>5Your content here</p>
                <p>6Your content here</p>
                <p>7Your content here</p>
                <p>8Your content here</p>
                <p>9Your content here</p>
                <p>10Your content here</p>
                <p>11Your content here</p>
                <p>AAAAAAAAAAAAAAAAA</p>
            </div>
        </div>
    </body>
</html>

解决方案 #

方案1：Flexbox + 继承高度（优先无vh方案） #

如果页面整体高度可以通过继承设置，用这个方案避免视口单位冲突：

html, body {
    height: 100%;
    margin: 0;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* 文本区域固定高度，不被压缩 */
.container > div {
    flex-shrink: 0;
}
/* 图片占满剩余空间，按比例缩放并居中 */
.container img {
    flex-grow: 1;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    align-self: center;
    display: block;
}

原理：Flex容器设置垂直方向布局，文本区域锁定高度不收缩，图片自动填充剩余空间；object-fit: contain保证图片按比例缩放，align-self: center实现水平居中，垂直方向由Flex布局自动适配居中。

方案2：Grid布局 #

用Grid的行高分配直接实现空间划分：

html, body {
    height: 100%;
    margin: 0;
}
.container {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
}
.container img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    justify-self: center;
    align-self: center;
}

原理：grid-template-rows: 1fr auto让第一行（图片）占满剩余空间，第二行（文本）自适应高度；justify-self和align-self直接控制图片的水平、垂直居中。

方案3：视口单位方案（必要时使用） #

如果页面无其他元素高度冲突，也可以用视口单位快速实现：

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* 其余样式同方案1 */

关键说明 #

• 之前object-fit: contain无效是因为图片没有明确的高度限制，给图片分配剩余空间后，object-fit才能生效；
• 文本区域必须设置不收缩属性（Flex的flex-shrink:0或Grid的auto行高），避免被压缩；
• 图片需同时设置max-width和max-height，防止超出容器范围。

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