如何使用Ruffle Flash模拟器让SWF文件按100%比例缩放？

要让SWF文件通过Ruffle实现100%比例缩放（填满目标容器），只需修改Ruffle的配置参数并配合简单的CSS样式即可，具体操作如下：

1. 调整Ruffle缩放配置 #

将原代码中scale: "showAll"改为scale: "exactFit"，该参数会让SWF内容忽略原始宽高比，拉伸至完全填满播放器的可用空间。

2. 设置容器样式保证尺寸 #

给容器和播放器添加CSS样式，确保容器能占据你需要的空间（比如全屏），播放器完全填满容器。

修改后的完整代码 #

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset='utf8'>
        <style>
            /* 设置容器占满浏览器视口 */
            #container {
                width: 100vw;
                height: 100vh;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            /* 让Ruffle播放器完全填满容器 */
            #container ruffle-player {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body style="margin: 0; padding: 0;">
    
    <div id="container"> </div>

       <script>
          window.RufflePlayer = {
            config: {
              autoplay: "on",
              wmode: "transparent",
              scale: "exactFit", // 改为exactFit实现100%缩放
              unmuteOverlay: "hidden",
            }
          };
       </script>
    
       <script>
          window.RufflePlayer = window.RufflePlayer || {};
          window.addEventListener("load", (event) => {
              const ruffle = window.RufflePlayer.newest();
              const player = ruffle.createPlayer();
              const container = document.getElementById("container");
              container.appendChild(player);
              player.load("index.swf");
          });
      </script>
      <script src="ruffle/ruffle.js"></script>
    </body>
</html>

补充说明 #

• 若需要保持SWF原始宽高比的同时填满容器（不拉伸变形），可保留scale: "showAll"，但这不属于严格的100%拉伸缩放。
• 若只需让SWF按原始尺寸100%显示（不缩放），可设置scale: "noScale"，并确保容器尺寸与SWF原始宽高一致。

内容的提问来源于stack exchange，提问作者Joe