浅谈 sencha 2.0 中image和carousel的图片自适应大小的应用
2012-07-28 03:58
239 查看
在sencha 2.0中,经常会用到xtype:image, 但是这个类型的使用,它的表现形式都是一个<div>,然后给把我们要显示的图片作为背景图片放入这个div中,这样,我们往往不好设置它的大小,因为图片是背景图片,高宽都不如<img>标签进行控制的好。
尤其是当我们使用xtype:carousel这个类型时,如果代码是这样:
这样,即使我们设置了高宽,但是图片都不会按大小进行缩放,反而是图片按这个大小进行裁剪,因为这样表现出来的是一个div里面的背景图片。因此,我们不妨不要直接在carousel的items里面直接写image,而是在items里面先定义一个panel,然后往这个panel里面填充,用html:"<img src='http://192.168.1.1/image.jpg'
style='max-height:200px;max-width:200px'>":就如代码:
这样把max-height和max-width设置为carousel的大小,那么图片就会自动缩放
尤其是当我们使用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的大小,那么图片就会自动缩放
相关文章推荐
- 浅谈 Sencha 2.0 中image和carousel的图片自适应大小的应用
- 浅谈 Sencha 2.0 中image和carousel的图片自适应大小的应用
- resizableImageWithCapInsets设置图片拉伸(自适应大小)
- 网页前端代码存档 - 【第二期】纯css图片自适应大小且水平垂直居中的应用
- Android 自定义imageview图片高度固定大小宽度按比例自适应
- Android 自定义imageview 图片宽度固定大小高度按比例自适应
- Android 自定义imageview 图片高度固定大小宽度按比例自适应
- ASP.NET实现自适应图片大小的弹出窗口(窗口可任意编辑)
- JS获取图片实际宽高及根据图片大小进行自适应
- 使用css 实现图片自适应大小
- css 图片自适应屏幕大小
- 手机浏览器用css设置图片自适应大小
- 图片自适应父元素大小,并左右上下居中的css方法
- css 背景图片自适应元素大小
- Android中如何让图片自适应控件的大小
- js实现图片的大小自适应效果
- UIImageView自适应图片大小
- android webview加载html图片自适应手机屏幕大小&点击查看大图
- 自适应图片大小的弹出窗口(3 中方法) 【转载】
- ASP.NET实现自适应图片大小的弹出窗口(窗口可任意编辑)