如何调整图片大小以适配顶部容器下方的窗口剩余空间？

实现方案 #

你可以直接使用下面的完整代码，不需要修改核心逻辑，只需要对应上你页面内的元素ID即可：

对应HTML结构示例（可适配你现有的页面结构调整） #

<!-- 上方高度可变的容器 -->
<div id="topsection">
  这里是顶部可变高度的内容，比如导航栏、标题模块等
</div>
<!-- 需要自适应高度的目标图片 -->
<img id="targetImg" src="你的图片地址" alt="展示图片">
<!-- 下方固定高度的区域 -->
<div id="bottomSection">
  这里是底部固定高度的内容
</div>

完整JavaScript代码（直接复制到页面即可生效） #

// 封装图片高度调整函数
function adjustImgHeight() {
  // 获取顶部可变容器的实际高度
  const topHeight = document.getElementById('topsection').offsetHeight;
  // 自动计算2em对应的像素高度，适配不同页面的字号设置
  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
  const bottomReserved = 2 * rootFontSize;
  // 计算图片可用高度：浏览器视口总高度 - 顶部容器高度 - 底部预留2em高度
  const availableHeight = window.innerHeight - topHeight - bottomReserved;
  // 给图片设置最大高度，同时自动保留图片原始宽高比
  const targetImg = document.getElementById('targetImg');
  targetImg.style.maxHeight = `${availableHeight}px`;
  targetImg.style.width = 'auto';
}

// 页面加载完成后自动执行一次计算
window.addEventListener('load', adjustImgHeight);
// 浏览器窗口大小变化时自动重新计算适配
window.addEventListener('resize', adjustImgHeight);
// 如果顶部容器内容会动态更新，你可以在内容更新的位置手动调用 adjustImgHeight() 即可

说明 #

• 代码已经自动完成了顶部高度扣除、底部2em预留的计算，不需要额外调整参数
• 图片设置的是最大高度，当图片本身尺寸小于可用高度时不会被拉伸，会按原始尺寸展示
• 支持窗口尺寸变化自动适配，不需要手动刷新页面

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