Fit Scale Mode

This example demonstrates how to use the FIT scale mode to automatically resize the game canvas to fit its parent container while strictly maintaining the aspect ratio.

Fit Scale Mode, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('pic', 'assets/pics/zero-two.png');
    }

    create ()
    {
        this.add.image(0, 0, 'pic').setOrigin(0);
    }
}

const config = {
    type: Phaser.AUTO,
    backgroundColor: '#2dab2d',
    scale: {
        mode: Phaser.Scale.FIT,
        parent: 'game-container',
        width: 800,
        height: 600
    },
    scene: Example
};

const game = new Phaser.Game(config);

More in Scalemanager24 examples