浅谈 Sencha 2.0 中image和carousel的图片自适应大小的应用

转自：http://extjs.org.cn/node/560

在sencha 2.0中，经常会用到xtype:image, 但是这个类型的使用，它的表现形式都是一个

，然后给把我们要显示的图片作为背景图片放入这个div中，这样，我们往往不好设置它的大小，因为图片是背景图片，高宽都不如 标签进行控制的好。
尤其是当我们使用xtype:carousel这个类型时，如果代码是这样：

view source

print ?

01. xtype: 'carousel',

02. items: [{

03. xtype: 'image',

04. height: '100',

05. width: '100',

06. src: 'http://192.168.1.1/image.jpg'

07. },{

08. xtype: 'image',

09. height: '100',

10. width: '100',

11. src: 'http://192.168.1.1/image.jpg'

12. }]

这样，即使我们设置了高宽，但是图片都不会按大小进行缩放，反而是图片按这个大小进行裁剪，因为这样表现出来的是一个div里面的背景图片。因此，我们不妨不要直接在carousel的items里面直接写image，而是在items里面先定义一个panel，然后往这个panel里面填充，用html:"<img src='http://192.168.1.1/image.jpg' style='max-height:200px;max-width:200px'>"：就如代码：

view source

print ?

1. xtype: 'carousel',

2. items: [{

3. xtype: 'panel',

4. html:"<img src='http://192.168.1.1/image.jpg' style='max-height:200px;max-width:200px'>"

5. },{

6. xtype: 'panel',

7. html:"<img src='http://192.168.1.1/image.jpg' style='max-height:200px;max-width:200px'>"

8. }]

这样把max-height和max-width设置为carousel的大小，那么图片就会自动缩放

作者:过去的我
原文:http://blog.csdn.net/dats0407/article/details/7795785

如果希望做出平铺效果可以参考：

http://blog.cfxixi.com/post/2012/08/28/%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87%E5%AE%9A%E4%B9%89%E6%A0%B7%E5%BC%8F%E5%B0%86%E5%9B%BE%E7%89%87%E5%B9%B3%E9%93%BA%E5%88%B0div%E9%87%8C%E9%9D%A2.aspx

Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。