在sencha 2.0中，經常會用到xtype:image, 但是這個型別的使用，它的表現形式都是一個<div>，然後給把我們要顯示的圖片作為背景圖片放入這個div中，這樣，我們往往不好設定它的大小，因為圖片是背景圖片，高寬都不如<img>標籤進行控制的好。

        尤其是當我們使用xtype:carousel這個型別時，如果程式碼是這樣：

xtype: 'carousel',
items: [{
    xtype: 'image',
    height: '100',
    width: '100',
    src: 'http://192.168.1.1/image.jpg'
},{
    xtype: 'image',
    height: '100',
    width: '100',
    src: 'http://192.168.1.1/image.jpg'
}]
 

        這樣，即使我們設定了高寬，但是圖片都不會按大小進行縮放，反而是圖片按這個大小進行裁剪，因為這樣表現出來的是一個div裡面的背景圖片。因此，我們不妨不要直接在carousel的items裡面直接寫image，而是在items裡面先定義一個panel，然後往這個panel裡面填充，用html:"<img src='http://192.168.1.1/image.jpg' style='max-height:200px;max-width:200px'>"：就如程式碼：

xtype: 'carousel',
items: [{
    xtype: 'panel',
    html:"<img src='http://192.168.1.1/image.jpg' style='max-height:200px;max-width:200px'>"
},{
    xtype: 'panel',
    html:"<img src='http://192.168.1.1/image.jpg' style='max-height:200px;max-width:200px'>"
}]
 

這樣把max-height和max-width設定為carousel的大小，那麼圖片就會自動縮放