如何让图片自适应网页底部剩余空间且不出现滚动条

核心需求 #

在文本下方展示一张图片，需满足以下要求：

• 图片水平居中
• 根据文本末端到浏览器窗口底部的剩余空间自动缩小适配
• 空间充足时，图片不得放大超过原尺寸
• 页面绝对不能出现滚动条

现有实现思路 #

我已完成的尝试步骤：

• 让样式化后的html元素始终与窗口内部空间完全匹配，作为页面不可超出的边界
• 将body的margin设为0，使其与html空间完全重合（避免默认边距导致body偏移，超出html范围触发滚动条）
• 在body内定义.outer-div容器，清除用户代理样式，恢复左右边距使其在body内对称收缩，设置display: flex和flex-flow: column布局
• 创建.inner-fixed-div作为flex项，放置页面顶部的文本内容
• 创建另一个flex项.inner-remaining-div，通过flex-grow: 1占据文本下方的剩余空间，作为图片容器
• 创建.picture-div作为图片容器，设置display: inline-block以响应父容器的text-align: center实现居中
• 为img设置width: 100%和height: auto，原本期望图片能按比例适配容器

目前多数同类问题的解决方案依赖固定像素值，但我需要无需知晓任何元素绝对尺寸的自适配方案。注：演示中使用的600x400 px图片仅为示例，实际图片尺寸不定，需保证空间充足时不放大，空间不足时缩小适配。

实现代码 #

CSS 代码 #

/* 所有轮廓均为"内轮廓"：负偏移让轮廓的外边缘贴合容器。
   这样做是因为否则最外层容器html的轮廓在窗口的北侧和西侧不可见 */

html {
  height: 100%;
  width: 100%;
  /* 轮廓显示"html"始终完全适配窗口 */
  outline: 6px dashed black;
  outline-offset: -6px;
}

body {
  margin: 0;
  /* 防止body向东南方向偏移 */
  height: 100%;
  /* body应完全覆盖html */
  width: 100%;
  outline: 4px dashed red;
  outline-offset: -4px;
}

.outer-div {
  display: flex;
  flex-flow: column;
  height: 100%;
  /* 设置左右边距 */
  margin: 0 0.5em;
}

.inner-fixed-div {
  outline: 4px dotted blue;
  outline-offset: -2px;
}

.inner-remaining-div {
  text-align: center;
  flex-grow: 1;
}

.picture-div {
  outline: 4px dashed fuchsia;
  outline-offset: -4px;
  /* 响应父容器的text-align */
  display: inline-block;
}

.picture-div-img {
  outline: 4px dashed purple;
  outline-offset: -4px;
  width: 100%;
  height: auto;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="outer-div">
    <div class="inner-fixed-div">
      <h1>静态内容区</h1>
      <p>
        Lorem ipsum odor amet, consectetuer adipiscing elit. Per dignissim arcu imperdiet accumsan suscipit. Nisl donec ultrices dui fames dapibus neque sollicitudin vitae. Ut parturient elementum cursus sodales sem sed praesent parturient. Rutrum ultricies erat
        finibus taciti ante feugiat dictumst dictum. Imperdiet lobortis penatibus non imperdiet ridiculus ac gravida. Platea lobortis tempor tempus lacus dui felis.
      </p>
      <h2>剩余空间将显示一张图片，必要时会缩放以适配</h2>
      <p>
        剩余空间应精确被HTML容器（粗黑色虚线轮廓）限制。图片需居中，随窗口尺寸变化动态缩放并保持比例。<i>绝对不能出现滚动条。</i>
      </p>
    </div>
    <div class="inner-remaining-div">
      <div class="picture-div">
        <img src="https://placehold.co/600x400?text=600+x+400\npx" class="picture-div-img">
      </div>
    </div>
  </div>
</body>

</html>

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