How to show image in full screen without croping

I have image which I want to show in full screen so that it takes max screen height or width whichever is smaller preserving ratio.

With the bellow example image is always maxed out to the screen height so on screens with narrow width right part of the image is not visible.

Code:

Ext.setup({  
  
  onReady        : function() {


    //CREATE CARD VIEW.------------------------------------------
    var img = Ext.create('Ext.Img', {
      src        : 'BLACK_GIANT.png',
      xtype      : 'image', 
      mode       : 'String',
      style      : 'background:red'


    });               
    
    //CREATE CARD LAYOUT CONTAINER TO HOLD THE ABOVE VIEWS.-------
    var view = Ext.create('Ext.Panel', {
      fullscreen : true,
      xtype      : 'panel', 
      layout     : 'fit',
      items      : [img]
    });   
    
  }


});

How to show image in full screen without croping