css - Image overlapping in sencha touch's carousel

Question

I created carousel which loads many images. However, each image is overlapping to another image from different card as shown here:

As you can see in the screenshot, some part of the first image appear in the second card and so on.

This is how I put the image inside a "html" component within carousel's item:

html: '<div> <img src="'+avaImg+'" />'

Is there any way to make the image fit into the screen regardless the resolution of the phone?

Answer 1

嗨@tukang你可以尝试创建css类，像这样，

.your_name {
   background-image: url(your_url_image);
   background-repeat: no-repeat;
   background-position: center;
}

然后把它放在你的html标签上<div class="your_name"></div>

我希望能帮助你。:)

Answer 2

为什么不在Ext.ImageSencha Touch 2 中使用组件？

然后，您可以使用styleconfig.xml 将自定义样式应用于该图像。