css - 将图像缩放到屏幕尺寸 sencha touch2

Question

这是我的代码： 代码：

 {                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: [
                                    ''
                                ]
                            }
                        ]
                    },
                    {

我有一个图像容器，我想将图像尺寸调整为屏幕尺寸，并对其进行缩放。这怎么可能？

提前致谢。

Answer 1

您可以尝试使用此函数来获取视口的高度和宽度。

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

Answer 2

对于那些可能偶然发现的人......最重要的是图像组件的父容器需要“适合”（卡片也可能这样做），我们将图像组件的背景大小样式设置为 100%（对于宽度和高度）

{               
    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: [
                        ''
                    ]
                }
            ]
        }
    ]
}