将图像缩放到屏幕尺寸 sencha touch2答案

【问题标题】：scaling images to screen dimension sencha touch2将图像缩放到屏幕尺寸 sencha touch2
【发布时间】：2012-10-20 15:35:35
【问题描述】：

这是我的代码：代码：

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

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

提前致谢。

【问题讨论】：

标签： css sencha-touch-2 image-scaling

【解决方案1】：

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

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

【讨论】：

另外，您可以在样式中指定： background-size: 100%;
` xtype: 'image', 停靠: 'top', height: Ext.viewport.getWindowHeight(),width: Ext.viewport.getWindowWidth(), html: '', id: 'imgCar '，填充：'0 0 0 510'，样式：'边距：0px auto;背景大小：100%；'，src：'localhost/car.jpg'`

【解决方案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: [
                        ''
                    ]
                }
            ]
        }
    ]
}

【讨论】：