scaling images to screen dimension sencha touch2

Question

this is my code: Code:

 {                xtype: 'tabpanel',
                docked: 'top',
                height: 752,
                width: '100%',
                activeItem: 1,
                items: [
                    {
                        xtype: 'container',
                        title: 'MyCar',
                        items: [
                            {
                                xtype: 'container',
                                maxWidth: '100%',
                                width: '100%',
                                items: [
                                    {
                                        xtype: 'image',
                                        docked: 'top',
                                        height: 407,
                                        html: '',
                                        id: 'imgCar',
                                        padding: '0 0 0 510',
                                        style: 'margin: 0px auto; width: 50%;background-size: auto;',
                                        src: 'http://localhost/car.jpg'
                                    }
                                ]
                            },
                            {
                                xtype: 'dataview',
                                height: 297,
                                html: '  <table id="tableConsumptions">     <tr>        <td id="consumptionsCol">val</td></tr> </table>',
                                width: '100%',
                                itemTpl: [
                                    ''
                                ]
                            }
                        ]
                    },
                    {

I have an image container, and I would like to adapt the image dimension to the screen dimension, scaling it. How is it possible?

Thanks in advance.

Answer 1

You can try using this function to fetch the height and width of the Viewport.

Ext.viewport.getWindowHeight( );
Ext.viewport.getWindowWidth( );

Answer 2

for those who might stumbled on this... most important thing is the parent container of the image component need to be "fit" (card might also do) and we set the background-size styling of the image component to 100% (for width and height)

{               
    xtype: 'tabpanel',
    docked: 'top',
    height: 752,
    width: '100%',
    activeItem: 1,
    items: [
        {
            xtype: 'container',
            title: 'MyCar',
            items: [
                {
                    xtype: 'container',
                    layout: 'fit', //supposedly when we want our image to be the same size as its container without specifying width and height, we use this and set the background-size style of the image to 100% (for both width and height)
                    maxWidth: '100%',
                    width: '100%',
                    items: [
                        {
                            xtype: 'image',
                            docked: 'top',
                            height: 407,
                            html: '',
                            id: 'imgCar',
                            style: 'background-size: 100% 100% !important;', //the most important key is backgeound-size styling for the image as it will be set as background of a div (unless we use mode: 'img' config)
                            src: 'http://localhost/car.jpg'
                        }
                    ]
                },
                {
                    xtype: 'dataview',
                    height: 297,
                    html: '  <table id="tableConsumptions">     <tr>        <td id="consumptionsCol">val</td></tr> </table>',
                    width: '100%',
                    itemTpl: [
                        ''
                    ]
                }
            ]
        }
    ]
}