浏览器窗口缩放时，如何让Div自适应Slider图片高度？

我懂你的痛点——滑块里的图片用绝对定位脱离了文档流，导致容器#gallery没法自动跟着图片高度走，虽然初始加载时脚本能搞定高度，但窗口缩放后，响应式图片尺寸变了，容器高度却卡在初始值不动。

给你一套完整的解决方案，分步骤来优化：

1. 把高度计算逻辑封装成可复用函数 #

首先把设置容器尺寸的代码抽成独立函数，这样能在多个场景重复调用：

function updateGallerySize() {
  // 只取当前显示的图片（其他隐藏图片的宽高都是0，不能用来计算）
  const activeImg = $("#gallery > img:visible");
  if (activeImg.length) {
    $("#gallery").css({
      width: activeImg.width(),
      height: activeImg.height()
    });
  }
}

2. 绑定多个触发时机 #

只在页面加载时执行一次远远不够，我们需要在这几个关键节点触发函数：

• 页面DOM加载完成后
• 所有图片加载完成后（避免图片没加载完就计算出错误尺寸）
• 窗口缩放稳定后（加防抖避免频繁触发）

完整的JS代码如下：

$(document).ready(function() {
  // 监听图片加载事件，确保图片完全加载后再计算尺寸
  $("#gallery img").on("load", updateGallerySize);
  
  // 页面初始加载时执行一次
  updateGallerySize();
  
  // 窗口缩放时执行（防抖处理，提升性能）
  $(window).on("resize", function() {
    // 清除之前的定时器，避免短时间内多次触发
    clearTimeout(window.galleryResizeTimer);
    // 延迟250ms执行，等缩放动作稳定后再计算
    window.galleryResizeTimer = setTimeout(updateGallerySize, 250);
  });
});

3. 关键细节说明 #

• 为什么用:visible？因为你的非首图都是display:none，直接取所有#gallery > img的话，会拿到隐藏图片的0宽高，导致容器高度被设为0，所以必须只针对当前显示的图片计算。
• 防抖处理的作用：窗口缩放时会连续触发resize事件，加个延迟可以避免短时间内多次执行计算函数，减少页面性能损耗。
• 监听图片load事件：如果图片是异步加载的（比如网速慢），页面ready时图片可能还没加载完成，这时候计算的宽高会完全错误，所以必须等图片加载完再补一次计算。

这样修改后，不管是页面初始加载、窗口缩放还是图片加载完成，容器#gallery的尺寸都会自动匹配当前显示的图片，再也不会出现超出容器或者高度不更新的问题啦。

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