在容器空间不足时自动等比缩放，避免纵向溢出
" />
本文介绍一种基于 Flexbox 的可靠方案，使图片在有限垂直空间内自动等比缩放并居中显示，确保下方文本内容始终完整可见，彻底杜绝 y-overflow。
本文介绍一种基于 flexbox 的可靠方案，使图片在有限垂直空间内自动等比缩放并居中显示，确保下方文本内容始终完整可见，彻底杜绝 `y-overflow`。
要解决“图片不溢出、文本全可见、图片自适应缩放并保持宽高比”的三重约束，核心思路是：将容器设为垂直弹性布局（flex-direction: column），让图片区域占据剩余高度，再通过 object-fit: contain + flex 容器实现等比缩放与居中。
以下为优化后的完整解决方案（已验证在 iPhone SE（375×667）等小屏设备上完全生效）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Image Layout</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.container {
height: 100vh; /* 关键：定义可用高度基准 */
display: flex;
flex-direction: column;
overflow: hidden; /* 阻止整体滚动，强制内部自适应 */
}
.img-container {
flex: 1 1 auto; /* 弹性生长，占据所有剩余空间 */
min-height: 0; /* 允许 flex 项收缩（重要！防止高度撑开） */
display: flex;
justify-content: center;
align-items: center;
background-color: #f8f9fa; /* 可选：便于观察占位 */
overflow: hidden; /* 确保图片不溢出容器 */
}
.img-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* ✅ 关键：等比缩放并完整显示 */
display: block; /* 消除 inline 图片默认的基线间隙 */
}
/* 文本区域：固定内容，不参与弹性分配（flex: 0 0 auto） */
.content {
flex: 0 0 auto;
padding: 1rem;
overflow-y: auto; /* 若内容极多，可启用局部滚动（非必需） */
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="img-container">
<img src="https://wallpapercave.com/dwp2x/wp4471355.jpg" alt="Responsive hero image" />
</div>
<div class="content">
<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>✅ 关键要点解析：
- flex: 1 1 auto + min-height: 0 是解决“图片不撑高、能收缩”的核心组合，缺一不可；
- object-fit: contain 确保图片在 img-container 内等比缩放、完整可见、居中对齐；
- .content 使用 flex: 0 0 auto 明确声明其不伸缩、不收缩，保证文本区域高度由内容自然决定；
- overflow: hidden 在 .container 和 .img-container 上双重设置，从根到层杜绝意外滚动；
- display: block 修复
默认 inline 行内行为导致的底部空白问题。
⚠️ 注意事项：
- 若实际项目中 .container 的高度不由 100vh 提供（如嵌套在复杂布局中），请确保其父容器具有明确高度（例如通过 height: fit-content 或 min-height + flex 继承），否则 flex: 1 将失去参照；
- 如需兼容旧版 Safari（
- 不建议对
单独设 height: 100% —— 这会破坏等比缩放，且在无明确父高时无效。
该方案轻量、语义清晰、无 JS 依赖，已在 Chrome、Safari、Firefox 移动端及桌面端全面验证，是响应式图片容器布局的工业级实践标准。
