如何将固定宽度页面加载到响应式<iframe>中？

你需要嵌入的页面在宽度低于1000px时失效，且无法修改原页面设计，希望用纯CSS实现响应式iframe加载、避免JS和大量媒体查询的方案如下：

解决方案代码 #

HTML

<div id="wrapper">
  <iframe src="faulty_page.html"></iframe>
</div>

CSS

#wrapper {
  width: 100vw;
  overflow: hidden;
  position: relative;
  /* 替换为原页面的宽高比，比如原页面宽1000px高800px，就写1000/800 */
  aspect-ratio: 1000 / 800;
}

#wrapper iframe {
  width: 1000px;
  height: 800px; /* 原页面的实际高度 */
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left; /* 确保缩放从左上角开始，避免内容偏移 */
  /* 核心修正：用数字1000而非1000px作为除数，符合calc语法 */
  transform: scale(calc(100vw / 1000));
}

关键说明 #

• 修正calc()语法：CSS中calc()的除法要求后项必须是无单位数字，因此将1000px改为1000（代表原页面的宽度像素值），这样100vw / 1000会计算出当前视口宽度与原页面宽度的比例，作为合法的缩放值。
• transform-origin: top left：默认缩放原点是元素中心，添加这个属性可以让iframe从左上角开始缩放，避免内容被裁剪或偏移。
• aspect-ratio：用于保持wrapper的宽高比与原页面一致，确保iframe缩放后不会出现滚动条或空白区域，需要替换为原页面实际的宽高比例。

动态高度页面的限制 #

如果原页面高度不固定（比如内容动态加载），纯CSS无法自动适配高度，这种情况下可能需要少量JS来获取iframe内容的实际高度并同步到wrapper，但如果是固定高度页面，上述方案完全满足需求。

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