如何基于容器宽度用CSS transform scale缩放固定尺寸iframe

你遇到的核心问题是CSS的calc()无法直接将百分比单位和像素单位做除法运算，不过我们有几种可行的方式来实现你的需求：

方案一：JavaScript动态计算缩放比例 #

这是兼容性最好的方案，能实时根据父容器宽度调整iframe的缩放比例：

1. 先给iframe的父容器添加标识类，方便后续获取元素：

<div class="row">
  <div class="column">.... some content </div>
  <div class="column iframe-container">
    <iframe src="...blah" class="scaled" />
  </div>
</div>

2. 基础CSS样式设置：

.iframe-container {
  width: 50%; /* 你的列宽度设置 */
  overflow: hidden; /* 防止缩放后的iframe超出容器范围 */
}
.scaled {
  width: 1440px;
  transform-origin: 0 0; /* 从左上角开始缩放，避免内容偏移 */
}

3. 添加JavaScript代码计算并更新缩放比例：

function updateIframeScale() {
  const container = document.querySelector('.iframe-container');
  const iframe = container.querySelector('.scaled');
  // 计算缩放比例：容器实际宽度 / iframe原始固定宽度
  const scaleRatio = container.offsetWidth / 1440;
  iframe.style.transform = `scale(${scaleRatio})`;
}

// 页面加载完成后初始化缩放
window.addEventListener('load', updateIframeScale);
// 窗口大小变化时重新计算适配
window.addEventListener('resize', updateIframeScale);

这个方案会在页面加载和窗口尺寸变化时自动调整缩放比例，完美适配父容器的宽度变化。

方案二：使用CSS容器查询（现代浏览器支持） #

如果你的目标浏览器支持容器查询（Chrome 105+、Firefox 110+、Safari 16+），可以用纯CSS实现：

1. 先声明容器查询的上下文：

.iframe-container {
  width: 50%;
  overflow: hidden;
  container-type: inline-size; /* 声明以容器的行内尺寸作为查询依据 */
}
.scaled {
  width: 1440px;
  transform-origin: 0 0;
}

2. 通过容器查询动态设置缩放比例：

@container (width < 1440px) {
  .scaled {
    transform: scale(calc(100cqw / 1440));
  }
}

这里的100cqw代表容器的100%宽度，这样就能在容器宽度变化时自动计算出对应的缩放比例。

为什么你之前的写法无效？ #

你尝试的calc(100% / 1440px)是错误的，因为100%是相对于父元素的百分比单位，而1440px是绝对像素单位，CSS不允许不同单位在calc()中直接做除法运算，所以这种写法会被浏览器直接忽略。

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