0

これは私のコードです: コード:

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

画像コンテナーがあり、画像のサイズを画面のサイズに合わせてスケーリングしたいと考えています。それはどのように可能ですか？

前もって感謝します。

4

2 に答える 2

0

この関数を使用して、ビューポートの高さと幅を取得してみてください。

Ext.viewport.getWindowHeight( );
Ext.viewport.getWindowWidth( );
于 2012-10-20T18:17:54.780 に答える
0

これにつまずいたかもしれない人のために...最も重要なことは、画像コンポーネントの親コンテナが「適合」する必要があることです（カードもそうかもしれません）。画像コンポーネントの背景サイズのスタイリングを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: [
                        ''
                    ]
                }
            ]
        }
    ]
}
于 2013-12-30T07:34:35.503 に答える