What Is The Css To Fill Parent Iframe, Or Resize Keeping Aspect When Full Screen?

I'm porting a game I wrote to be a pixi.js HTML5 game that I can embed on itch.io. My game prints to a canvas, which is on a HTML file. itch.io embeds that HTML file in an iframe,

Solution 1:

This is achieved with the following CSS. The max-height and max-width need to be adjusted to be appropriate for the aspect ratio.

<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>