如何实现Div元素随浏览器窗口大小自适应缩放

你之前用百分比单位未生效的核心原因有两个：一是三列容器、内部图片、列间距全部写死了固定px值，固定单位不会随视口尺寸变化；二是百分比宽度生效要求父元素有明确的可参照尺寸，你原有代码中父容器未设置有效参照宽度，同时父容器开启flex布局后子元素还加了float属性，两种布局规则冲突也会导致尺寸计算异常。

下面提供两种可直接落地的方案，按需选择即可：

方案一：相对单位改造（改动最小，保留原生滚动能力） #

这个方案不需要大幅改动原有结构，核心改动点如下：

• 移除子元素冗余的float属性，父容器已设置flex布局，不需要浮动控制排列
• 列宽、列间距、logo尺寸全部改用vw单位（1vw = 当前视口宽度的1%），自动随窗口宽度同步缩放
• 列内图片宽度设为100%继承父容器宽度，删除所有img标签上写死的style="width: 400px"内联样式
• 补全全局盒模型规则，避免边距溢出导致布局错位

改造后的完整CSS代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#content,
html,
body {
  height: 98%;
  display: flex;
  justify-content: center;
  gap: 6vw;
}

#left, #middle, #right {
  width: 25vw;
  height: 100%;
  overflow: auto;
}

#left img, #middle img, #right img {
  width: 100%;
  display: block;
  margin-bottom: 12px;
}

#logo {
  width: 8vw;
  position: fixed;
  left: 90vw;
  top: 50%;
  transform: translateY(-50%);
}

HTML部分只需要删除所有img标签上的固定宽度内联样式，原有结构不需要调整。

方案二：整页严格等比缩放（零改动原有固定px代码） #

如果需要完全保留你原有代码的尺寸比例，所有元素（包括后续新增的文字、边距、组件）都严格随窗口等比缩放，直接用缩放容器的方案实现，不需要修改原有写死px的代码：

1. 先在你原有所有内容外层套一个固定基准尺寸的容器，基准尺寸按你设计稿的实际尺寸设置，比如当前三列+间距的总宽度约为1600px，可设为基准宽度：

<div id="scale-wrap">
  <!-- 你原来的所有#content及内部内容全部放在这里 -->
</div>

2. 给外层容器加基础样式：

#scale-wrap {
  width: 1600px; /* 设计稿基准宽度 */
  height: 900px; /* 设计稿基准高度，按实际需求调整 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
}

3. 加少量JS监听窗口尺寸变化，自动计算缩放比例：

function calcScale() {
  const wrap = document.getElementById('scale-wrap')
  const scaleX = window.innerWidth / 1600
  const scaleY = window.innerHeight / 900
  // 取宽高缩放比的较小值，保证内容完整显示不溢出
  const scale = Math.min(scaleX, scaleY)
  wrap.style.transform = `translate(-50%, -50%) scale(${scale})`
}
window.addEventListener('load', calcScale)
window.addEventListener('resize', calcScale)

这个方案的优势是适配成本极低，原有代码完全不需要调整，所有元素的比例会和你写的固定px尺寸完全一致，不会出现布局错位。

注意：如果用百分比做单位，一定要确认当前元素的直接父元素有明确的宽度设置，否则百分比会逐层向上查找参照，最终找到根元素时计算结果往往和预期不符。

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