如何将最大宽度大于100％的iframe居中对齐，以便裁剪一些iframe宽度？

编程问答 2022-08-13

问题描述

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

我希望能够将iframe保持水平居中，最大宽度为170％，这样，无论哪种尺寸，最多可以裁剪35％的iframe，但是高度始终会填充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;
  
}

有关我仍然遇到的小问题，请参见下面的答复。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

crophtml5-canvasiframewidth