如何通过浏览器窗口宽度调整元素宽高并实现最终宽高一致？

嘿，这个需求我之前帮不少人解决过，其实有两种非常实用的实现方式，看你具体场景来选就行👇

方案一：纯CSS实现（最推荐，无JS依赖） #

如果你的需求比较直接，不需要复杂的动态逻辑，纯CSS就能完美搞定，而且性能更好，不用额外监听事件。

方法1：利用aspect-ratio属性（现代浏览器首选） #

现在主流浏览器都支持aspect-ratio属性了，它可以直接强制元素保持指定的宽高比，搭配相对窗口宽度的单位（比如vw），就能让元素随窗口宽度同步变化且始终是正方形：

.square-element {
  /* 宽度设为窗口宽度的50%，你可以根据需求调整这个比例 */
  width: 50vw;
  /* 强制宽高比为1:1，也就是正方形 */
  aspect-ratio: 1 / 1;
  background: #e2e2e2; /* 加个背景方便看效果 */
  margin: 0 auto; /* 可选，居中显示 */
}

原理：vw单位是相对于视口宽度的1%，所以50vw就是窗口宽度的一半；aspect-ratio:1/1会让元素的高度自动等于宽度，不管初始尺寸是什么，都会强制变成正方形。

方法2：Padding-top 技巧（兼容老浏览器） #

如果需要兼容一些不支持aspect-ratio的老浏览器（比如IE），可以用这个经典的padding-top trick：

/* 外层容器控制宽度 */
.square-container {
  width: 50vw;
  position: relative;
  margin: 0 auto;
}
/* 实际内容元素 */
.square-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e2e2e2;
}
/* 用伪元素撑开高度，百分比是相对于容器宽度的 */
.square-container::before {
  content: '';
  display: block;
  padding-top: 100%; /* 100%就意味着高度等于容器宽度，形成正方形 */
}

原理：CSS中padding的百分比值是相对于父元素宽度计算的，所以padding-top:100%会让伪元素的高度等于容器的宽度，从而撑开容器，内部绝对定位的元素就会填满这个正方形空间。

方案二：JavaScript控制（适合复杂动态场景） #

如果你的需求需要更灵活的逻辑（比如根据不同窗口宽度切换比例、结合其他动态数据等），用JS监听窗口resize事件来动态计算尺寸是更好的选择，记得加上防抖避免频繁触发影响性能：

<div class="square-element" id="targetSquare"></div>

<script>
const square = document.getElementById('targetSquare');

// 防抖函数：避免resize事件频繁触发导致性能问题
function debounce(func, delay = 150) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 更新元素尺寸的核心函数
function updateSquareSize() {
  // 这里可以自定义逻辑，比如取窗口宽度的40%作为正方形的边长
  const windowWidth = window.innerWidth;
  const sideLength = windowWidth * 0.4;
  
  // 同步设置宽高，确保始终相等
  square.style.width = `${sideLength}px`;
  square.style.height = `${sideLength}px`;
}

// 页面加载时先初始化一次尺寸
updateSquareSize();

// 监听窗口resize事件，用防抖优化
window.addEventListener('resize', debounce(updateSquareSize));
</script>

<style>
.square-element {
  background: #e2e2e2;
  margin: 0 auto;
}
</style>

原理：通过window.innerWidth获取当前窗口宽度，计算出正方形的边长，然后同步设置给元素的宽高；防抖函数可以让resize事件停止触发一段时间后再执行更新逻辑，避免窗口拖动过程中频繁计算。

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