javascript - 当我全屏显示一个 div 时，如何确保其中的对象也全屏显示？

Question

我正在尝试全屏显示 Flash 游戏，我制作了一个按钮，使容器 div 全屏显示。但是，div 内的 flash 游戏不会随 div 全屏显示，而是填满屏幕的左上角。如何让 Flash 游戏在扩展到全屏模式时跟随 div？

我尝试在 CSS 的 .ob 部分使用 object-fit contain 和 cover。

我有一个 div:

        <div id="gamebox">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 


codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab    #version=5,0,0,0" >
            <param name=movie value="adrenaline.swf">
            <param name=quality value=high>
            <param name="menu" value="false">
            <embed src="Flash/adrenaline.swf" quality=high menu="false" 
                pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?    P1_Prod_Version=ShockwaveFlash" 
            type="application/x-shockwave-flash" width="550"     height="400"> </embed></object>
        </div>

使用以下代码变成全屏:

<script type="text/javascript">
      function goFullscreen(id) {
        var element = document.getElementById(id);
        if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
    </script>

使用以下按钮:

 <button onclick="goFullscreen('gamebox'); return false">Fullscreen     Mode</button>

我的游戏盒有以下 CSS:

#gamebox {
    display: table;
    margin: 0 auto;
    }

然而，当我全屏显示 div 时，游戏本身只占据左上角，并没有用 div 填满屏幕。

我当然期待全屏体验，但我只有屏幕的左上角可以玩。全屏功能有效，但仅适用于 div，不适用于对象。

Answer 1

您必须为父级 div 提供 swf 内容一些初始尺寸，例如Flash 影片的实际尺寸。 现在在对象和嵌入标签的属性中，将宽度/高度设置为 100%。这将确保 swf 始终根据其父项按比例缩放。

<div id="gamebox" style="width:550px;height:400px">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  id="adrenaline" width="100%" height="100%">
  <param name="movie" value="adrenaline.swf">
  <param name="bgcolor" value="#000000">
  <param name="quality" value="high">
  <embed type="application/x-shockwave-flash"
   pluginspage="http://www.macromedia.com/go/getflashplayer"
   width="100%" height="100%"
   name="adrenaline" src="adrenaline.swf"
   bgcolor="#000000" quality="high"
  ></embed>
</object>
</div>
<button onclick="goFullscreen('gamebox'); return false">Fullscreen     Mode</button>

Flash 提供了一个额外的属性来控制影片的缩放方式:scale。 如果它不存在，则使用默认的 "showall" 来保持电影的纵横比。 “exactfit” 另一方面会延伸到整个容器。