如何按比例缩放含绝对定位元素的容器以适配视口

针对你提到的960x540（16:9比例）容器及绝对定位子元素的缩放需求，这里提供两种可行方案：

纯CSS方案（推荐，无需脚本） #

核心思路是让容器保持原始宽高比，同时将子元素的像素定位/尺寸转换为百分比，实现自动跟随缩放。

代码示例 #

/* 容器样式：保持16:9比例，填满视口可用空间 */
.container {
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  aspect-ratio: 16/9; /* 直接指定宽高比，现代浏览器支持 */
  margin: 0 auto; /* 可选：让容器在视口居中 */
  overflow: hidden; /* 防止子元素溢出视口 */
}

/* 子元素示例：将原像素值转为相对于容器的百分比 */
/* 原样式：position: absolute; left: 96px; top: 54px; width: 192px; height: 108px; */
.child-element {
  position: absolute;
  left: 10%;  /* 96 ÷ 960 = 10% */
  top: 10%;   /* 54 ÷ 540 = 10% */
  width: 20%; /* 192 ÷ 960 = 20% */
  height: 20%;/* 108 ÷ 540 = 20% */
}

关键说明 #

• aspect-ratio:16/9 是现代浏览器的原生属性，能直接让容器保持16:9比例。如果需要兼容IE等旧浏览器，可改用padding-top: 56.25%（因为9/16=0.5625），此时容器需设置height:0，子元素基于容器绝对定位。
• 子元素的所有像素值必须转换为百分比：位置（left/top）基于容器宽度/高度计算，尺寸（width/height）同理，这样容器缩放时，子元素的布局关系完全保留。

JS/jQuery方案（无需修改子元素样式） #

如果不想改动子元素的原始像素值，可以通过脚本动态计算缩放比例，用transform:scale()整体缩放容器。

原生JS示例 #

<div class="container">
  <!-- 保留原有子元素的像素定位/尺寸 -->
  <div class="child-element" style="position:absolute; left:96px; top:54px; width:192px; height:108px;"></div>
</div>

<script>
function scaleContainer() {
  const container = document.querySelector('.container');
  const originalW = 960, originalH = 540;
  const viewW = window.innerWidth, viewH = window.innerHeight;
  const viewRatio = viewW / viewH;
  const containerRatio = originalW / originalH;

  let scale;
  // 判断以宽度还是高度为基准缩放
  if (viewRatio > containerRatio) {
    // 视口更宽，以高度适配
    scale = viewH / originalH;
  } else {
    // 视口更高，以宽度适配
    scale = viewW / originalW;
  }

  // 设置容器缩放及居中
  container.style.cssText = `
    width: ${originalW}px;
    height: ${originalH}px;
    transform: scale(${scale});
    transform-origin: top left;
    position: absolute;
    left: ${(viewW - originalW * scale) / 2}px;
    top: ${(viewH - originalH * scale) / 2}px;
  `;
}

// 初始化+监听窗口 resize
window.addEventListener('load', scaleContainer);
window.addEventListener('resize', scaleContainer);
</script>

jQuery简化版本 #

$(function() {
  function scaleContainer() {
    const $container = $('.container');
    const originalW = 960, originalH = 540;
    const viewW = $(window).width(), viewH = $(window).height();
    const viewRatio = viewW / viewH;
    const containerRatio = originalW / originalH;

    const scale = viewRatio > containerRatio ? viewH / originalH : viewW / originalW;

    $container.css({
      width: originalW,
      height: originalH,
      transform: `scale(${scale})`,
      transformOrigin: 'top left',
      position: 'absolute',
      left: (viewW - originalW * scale) / 2,
      top: (viewH - originalH * scale) / 2
    });
  }

  $(window).on('load resize', scaleContainer);
});

关键说明 #

• 通过对比视口和容器的宽高比，选择合适的缩放基准，确保容器始终填满视口且比例不变。
• transform:scale()会整体缩放容器及内部所有子元素，原始的绝对定位像素值会自动按比例适配，无需修改子元素样式。
• transformOrigin:top left保证缩放从容器左上角开始，避免布局偏移，再通过绝对定位让容器居中显示。

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