如何使max-width超100%的iframe水平居中并均等裁剪两侧宽度？

看起来你已经离目标很近了，之前的样式里有个关键小问题：当给iframe设置position: absolute后，它会脱离文档流，body上的flex居中属性其实对它不起作用，这大概率就是你还存在遗留问题的原因。

咱们来调整一下样式，完美实现你要的效果：保持1920×1080的宽高比，水平居中，最大宽度170%（两侧最多裁35%），高度优先占满容器但不突破宽度限制。

方案一：使用现代CSS的aspect-ratio（推荐） #

这个方案简洁高效，支持绝大多数现代浏览器：

<body>
  <iframe class="frame" src="你的canvas运行时地址"></iframe>
</body>

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* 让body占满整个浏览器视口 */
  width: 100vw;
  height: 100vh;
  /* flex布局实现iframe水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame {
  border: none;
  padding: 0;
  /* 强制保持1920:1080的原始宽高比 */
  aspect-ratio: 1920 / 1080;
  /* 优先让高度占满容器 */
  height: 100%;
  /* 限制最大宽度为视口的170%，避免两侧裁剪超过35% */
  max-width: 170vw;
  /* 当高度占满后宽度超过170%时，自动缩小高度以保持比例 */
  width: auto;
}

关键逻辑说明 #

• aspect-ratio确保iframe不会变形，始终保持原始的16:9比例
• height: 100%让iframe优先填满容器高度，此时宽度会按比例自动计算
• 如果计算后的宽度超过了视口的170%，max-width:170vw会生效，限制宽度，同时width:auto会让高度自动调整，保证比例不变
• body的flex布局让iframe在水平方向完美居中，缩小浏览器时会两侧均等裁剪，而不是只裁一侧

方案二：兼容旧浏览器（不用aspect-ratio） #

如果需要支持不兼容aspect-ratio的旧浏览器，可以用padding模拟宽高比：

<body>
  <div class="frame-container">
    <iframe class="frame" src="你的canvas运行时地址"></iframe>
  </div>
</body>

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame-container {
  position: relative;
  /* 优先占满高度 */
  height: 100%;
  /* 限制最大宽度为视口的170% */
  max-width: 170vw;
  width: auto;
}

/* 用padding-top模拟1920:1080的宽高比（1080/1920*100% = 56.25%） */
.frame-container::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
}

这个方案的核心是用容器的padding-top来维持宽高比，iframe绝对定位占满容器，同样能实现你要的所有效果。

内容的提问来源于stack exchange，提问作者Joggoth the Rainbender