如何将 iframe 与大于 100% 的最大宽度居中对齐，以便裁剪部分 iframe 宽度？
[英]How do I center align iframe with a max-width greater than 100% in order to crop some of the iframe width?
问题描述
I am using an iframe to display a canvas runtime with the dimensions of 1920x1080.
我正在使用 iframe 来显示尺寸为 1920x1080 的 canvas 运行时。
I want to be able to keep the iframe horizontally centered with a maximum width of 170% so that up to 35% of the iframe can be cropped on either size but the height will always fill 100% of the frame except for when doing so will cause the horizontal width to exceed 170%.我希望能够保持 iframe 水平居中，最大宽度为 170%，这样 iframe 的 35% 可以在任一尺寸上裁剪，但高度将始终填充框架的 100%，除非这样做导致水平宽度超过170%。
This is my current style code for the iframe. It actually works perfectly except the iframe is always fixed to the left edge of the browser frame so when I shrink the browser horizontally it will crop up to 70% of the frame on the right side only rather than equally on either size.这是我当前的 iframe 样式代码。除了 iframe 始终固定在浏览器框架的左边缘之外，它实际上工作得很好，所以当我水平缩小浏览器时，它只会裁剪右侧框架的 70%而不是在任一尺寸上均等。
.frame {
display: flex;
width: 1920px;
max-width: 170%;
height: 100%;
padding: 0;
border: 0 none;
}
EDIT: This is how my style is now set up after @Dan's helpful response (added overflow hidden to remove scroll bars)编辑：这就是在@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;
}
See my reply below for the small issue I'm still having.有关我仍然遇到的小问题，请参阅下面的回复。
1 个解决方案
解决方案1
1 2020-08-30 01:25:06
I was able to get it working with the following setup.我能够使用以下设置让它工作。 The body is now display: flex and the iframe is position: absolute; body现在display: flex和iframe是position: absolute;
These two working together gave the desired effect.这两个一起工作产生了预期的效果。 Let me know how it works out.让我知道它是如何工作的。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.