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

Sencha Carousel 图片适配

最新推荐文章于 2021-08-03 09:10:10 发布

转载最新推荐文章于 2021-08-03 09:10:10 发布 · 797 阅读

sencha 专栏收录该内容

8 篇文章

订阅专栏

本文介绍在Sencha Touch 2.0中使用xtype:carousel时如何正确设置图片大小，通过将图片嵌入到panel中并利用内联样式控制图片尺寸，实现图片的自动缩放。

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

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

，然后给把我们要显示的图片作为背景图片放入这个div中，这样，我们往往不好设置它的大小，因为图片是背景图片，高宽都不如标签进行控制的好。
尤其是当我们使用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.
   }]