如何将最大宽度大于 100% 的 iframe 居中对齐以裁剪一些 iframe 宽度？答案

【问题标题】：How do I center align iframe with a max-width greater than 100% in order to crop some of the iframe width?如何将最大宽度大于 100% 的 iframe 居中对齐以裁剪一些 iframe 宽度？
【发布时间】：2020-12-18 12:27:33
【问题描述】：

我正在使用 iframe 显示尺寸为 1920x1080 的画布运行时。

我希望能够将 iframe 保持水平居中，最大宽度为 170%，以便在任一尺寸上最多可以裁剪 iframe 的 35%，但高度将始终填充框架的 100%，除非这样做会导致水平宽度超过 170%。

这是我当前的 iframe 样式代码。它实际上工作得很好，除了 iframe 总是固定在浏览器框架的左边缘，所以当我水平缩小浏览器时，它只会在右侧裁剪多达 70% 的框架，而不是在任一尺寸上均等。

.frame {
  display: flex;
  width:  1920px;
  max-width: 170%;
  height: 100%; 
  padding: 0;
  border: 0 none;  
}

编辑：这就是在@Dan 的有用响应之后我现在设置的样式（添加了隐藏的溢出以删除滚动条）

body {

    margin: 0;
    padding: 0;
    overflow: hidden;  
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.frame {

    padding: 0;
    border: 0 none;
    width: 1920px;
    max-width: 170%;
    height: 100%;
    position: absolute;
  
}

关于我仍然遇到的小问题，请参阅下面的回复。

【问题讨论】：

标签： css iframe html5-canvas width crop

【解决方案1】：

我能够使用以下设置使其正常工作。 body 现在是 display: flex，iframe 是 position: absolute;

这两个一起工作产生了预期的效果。让我知道结果如何。

<body>
    <style>
        body {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
        }
        iframe {
            width: 1920px;
            max-width: 170%;
            height: 100%;
            position: absolute;
        }
    </style>
    <iframe src=""></iframe>
</body>

【讨论】：

非常感谢您的回复。我的结果似乎与你的略有不同，几乎是完美的，只有一个小例外。如果浏览器宽度小于 1080，则框架将按预期裁剪，其中 35% 的框架在任一侧被裁剪，框架的底部边缘填充空白以防止框架超过 170% 的宽度。这是想要的效果。一旦浏览器宽度达到 1080+，框架的右侧将开始以大约 3 倍于左侧的速率扩展，因此 iframe 不再居中。
浏览器窗口扩大约 200 像素后，左侧将以与右侧相同的速度扩大，但由于最初的 200 像素差异，它仍会关闭。