javascript - 制作自适应 iframe，然后在单击按钮时允许全屏显示

Question

我正在使用此代码获取具有固定比例宽度和高度的自适应 iframe:

<div id="game-container" style="overflow: hidden; position: relative; padding-top: 60%">
<iframe  style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" scrolling="no" src="example.html">
</iframe>
</div>

然后，我创建了一个类为“toggle_fullscreen”的按钮，并插入此 JS 以在单击该按钮时允许全屏显示:

var game = $("#game-container");
var FSbutton = $(".toggle_fullscreen");
var gm = game[0];
FSbutton.on('click', function(e){
if (gm.requestFullscreen) {
  gm.requestFullscreen();
} else if (gm.mozRequestFullScreen) {
  gm.mozRequestFullScreen();
} else if (gm.webkitRequestFullscreen) {
  gm.webkitRequestFullscreen();
}});

这在 iframed 元素的宽度大于高度时效果很好，但如果不是，则会发生宽度变为 100% 且元素未完整显示的情况。我尝试对代码进行更多尝试，但没有弄明白。您能否建议一种更好的方法来获得可根据要求全屏显示的自适应 iframe(具有最大宽度)？

Answer 1

我建议你使用这个问题:Maintain the aspect ratio of a div with CSS . 在您的 example.html 中使用它来使您的内容具有固定比例。