浅谈 Sencha 2.0 中image和carousel的图片自适应大小的应用
来源:互联网 发布:光翼学园网络班知乎 编辑:程序博客网 时间:2024/06/05 18:06
转自:http://extjs.org.cn/node/560
在sencha 2.0中,经常会用到xtype:image, 但是这个类型的使用,它的表现形式都是一个
,然后给把我们要显示的图片作为背景图片放入这个div中,这样,我们往往不好设置它的大小,因为图片是背景图片,高宽都不如标签进行控制的好。
尤其是当我们使用xtype:carousel这个类型时,如果代码是这样:
尤其是当我们使用xtype:carousel这个类型时,如果代码是这样:
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'>":就如代码:
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的大小,那么图片就会自动缩放
- 浅谈 sencha 2.0 中image和carousel的图片自适应大小的应用
- 浅谈 Sencha 2.0 中image和carousel的图片自适应大小的应用
- 浅谈 Sencha 2.0 中image和carousel的图片自适应大小的应用
- sencha 2.0 的tabpanel中使用formpanel,carousel 等的用法
- sencha Carousel panel sethtml 出界的解决方案
- sencha 在list中判断image error的实现默认图片的处理方法
- Android中如何让图片自适应控件的大小
- 自适应大小的图片弹出窗口
- 使图片自适应窗口的大小
- 弹出窗口自适应图片的大小
- Qt之图片自适应QLabel的大小
- iOS xib创建的imageview随image大小而自适应
- Sencha touch中Ext.List如何高度自适应的解决方法
- Sencha touch中Ext.List的使用及高度自适应
- Dialog大小控制和Dialog中使用的ListView自适应
- 关于WeX5的carousel控件如何清除图片和增加图片
- shadowOffset shadowColor 的应用和image中AspectFill中的应用
- 微信小程序image图片自适应宽度比例显示的方法
- MapObject2.1在C#中的运用
- VC编程调用dxdiag生成XML文件,来获取系统配置情况
- 数制转换
- C 语言文件操作一般过程
- C++采用递归算法寻找一个整型数组中的最大元素
- 浅谈 Sencha 2.0 中image和carousel的图片自适应大小的应用
- C#基础:使用Thread创建线程
- linux sed命令详解
- HDU 2206 IP的计算 比较坑
- 实验7 IO流
- MyEclipse下配置mysql驱动的方法
- ORA-01578(数据块损坏) 转
- Custom Drawn Scrollbar
- C#模拟post提交的实现方法