你可以使用CSS的transform属性来实现按比例缩放一个包含绝对定位元素的容器，以适应视口大小。下面是一个示例代码：

HTML部分：

CSS部分：

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; /* 设置容器的高度为宽度的50% */
  overflow: hidden;
  transform-origin: top left; /* 设置缩放的基准点为左上角 */
}

.absolute-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  transform: scale(1); /* 初始缩放比例为1 */
  transform-origin: top left; /* 设置缩放的基准点为左上角 */
}

JavaScript部分：

// 根据视口大小计算缩放比例并应用到容器和绝对定位元素上
function scaleContainer() {
  const container = document.querySelector('.container');
  const absoluteElement = document.querySelector('.absolute-element');
  const containerWidth = container.clientWidth;
  const containerHeight = container.clientHeight;
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  const scaleX = viewportWidth / containerWidth;
  const scaleY = viewportHeight / containerHeight;
  const scale = Math.min(scaleX, scaleY); // 取较小的缩放比例
  container.style.transform = `scale(${scale})`;
  absoluteElement.style.transform = `scale(${1 / scale})`; // 反向缩放绝对定位元素，保持其原始大小和位置
}

// 初始化时进行一次缩放
window.addEventListener('load', scaleContainer);

// 窗口大小改变时重新进行缩放
window.addEventListener('resize', scaleContainer);

这段代码会根据视口大小计算缩放比例，并将其应用到容器和绝对定位元素上。其中，容器使用了padding-bottom来实现高度的自适应，然后通过设置transform属性来缩放容器和绝对定位元素。在JavaScript部分，通过监听load和resize事件来触发缩放函数。