масштабирование изображений до размера экрана sencha touch2

это мой код: Код:

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

У меня есть контейнер изображения, и я хотел бы адаптировать размер изображения к размеру экрана, масштабируя его. Как это возможно?

Заранее спасибо.


image-scaling css sencha-touch-2
person michele    schedule 20.10.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете попробовать использовать эту функцию для получения высоты и ширины области просмотра.

Ext.viewport.getWindowHeight( );
Ext.viewport.getWindowWidth( );
person Urmil Setia    schedule 20.10.2012
comment
Также в стиле можно указать: background-size: 100%; - person Urmil Setia; 21.10.2012
comment
` xtype: 'image', пристыкован: 'top', высота: Ext.viewport.getWindowHeight(), ширина: Ext.viewport.getWindowWidth(), html: '', id: 'imgCar', заполнение: '0 0 0 510", стиль: "поле: 0px авто; background-size: 100%;', src: 'localhost/car.jpg' ` - person Urmil Setia; 22.10.2012

arrow_upward
0
arrow_downward

для тех, кто может наткнуться на это ... самое главное, родительский контейнер компонента изображения должен быть "подходящим" (карта также может подойти), и мы устанавливаем стиль background-size компонента изображения на 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: [
                        ''
                    ]
                }
            ]
        }
    ]
}
person Rajan    schedule 30.12.2013