什么是 CSS 来填充父 IFrame，或者在全屏时调整大小保持纵横比？

Question

我正在将我编写的游戏移植为 pixi.js HTML5 游戏，我可以将其嵌入 itch.io。我的游戏打印到 canvas，它位于 HTML 文件中。 itch.io 将 HTML 文件嵌入到 iframe 中，并提供全屏按钮以全屏显示 iframe。

我的游戏运行固定分辨率为 720x960 - 在 CSS 缩放之前。 itch.io 具有固定大小的 iframe，我可以使用其界面进行设置。我将其设置为 720x960 以匹配游戏。

我正在尝试为 HTML 文件编写 CSS，它将按如下方式调整 canvas 的大小：

在 iframe 中显示时，canvas 会扩展以适应 iframe，如果 iframe 的纵横比与 iframe 的纵横比不同，则保持纵横比并居中游戏的纵横比。
全屏显示时，canvas 会扩展以适合屏幕，保持纵横比并居中显示。

我试过两种半成功的方法：

首先，我尝试使用样式canvas { width 100%; height 100%}。这非常适合 iframe，但在全屏时将较小的尺寸扩展到屏幕的整个宽度，这意味着较长的尺寸不在屏幕上。

其次，我尝试使用以下方法：

      canvas, html, body {
        margin: 0;
        padding: 0;
      }

      canvas {
        max-width: 100vw;
        max-height: 100vh;
        position: absolute;
      }

      @media (min-width: 75vh)
      {
        canvas {
          width: 75vh; /* (720 / 960) * 100*/
          height: 100vh;
          left: 50%;
          transform: translateX(-50%)
        }
      }

      @media (max-width: 75vh)
      {
        canvas {
          width: 100vw;
          height: 133.333vw; /* (960 / 720) * 100 */
          display: flex;
          top: 50%;
          transform: translateY(-50%)
        }
      }

在全屏上完美运行，但将 canvas 部分移出了 iframe（如屏幕截图所示）- 我怀疑 vh 和 vw 基于 window，而不是 iframe。

浏览器得到的

HTML（canvas是pixi.js加上的）如下：


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>webpack App</title>
        <style>
            <!-- CSS as above is here -->
        </style>
      </head>
      <body>
        <canvas width="720" height="960" style="touch-action: none; cursor: inherit;"></canvas>
        <script src="bundle.js"></script>
      </body>
    </html>

什么 css 包含在我的 html 文件中以使其适当地适合 iframe，并且在全屏时适当地扩展？

Answer 1

这是通过以下 CSS 实现的。 max-height 和 max-width 需要调整以适合纵横比。

<style>
  html, body
  {
    height: 100%;
    margin: 0;
  }
  body
  {
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;  
  }
  canvas
  {
    display: block;
    outline: none;
    height: 100%;
    max-height: 133.333vw;
    width: 100%;
    max-width: 75vh;
  }
  </style>

什么是 CSS 来填充父 IFrame，或者在全屏时调整大小保持纵横比？

What is the CSS to fill parent IFrame, or resize keeping aspect when full screen?

html

css

iframe

pixi.js