Carousel image re-sizing

[403]

Hello,

I am looping through a store to add images to my carousel as follows, however, the images appear cropped as they are not re-sizing to fit the dimensions of the carousel. How can I add images to the carousel so that they are sized appropriately?

Thanks for your help

Ext.getStore('pictures').load(function(pictures) {
    var items = [];
    Ext.each(pictures, function(picture) {
        if (!picture.get('image')) {
            return;
        }
        var myImage = Ext.create('Ext.Img', {
            src: picture.data.content,
            listeners : {
                painted : function(pic) {
                    var el = pic.element;
                }
            }
        });
        container.add([myImage]);
    });
    container.setActiveItem(0);
});

[mitchellsimoens]

Inspect the DOM, in this case they are background-image so is there a background-size CSS rule?

[403]

This did the trick:

.x-img {background-size:100% 100%;}

Thanks

[lgertel]

I think that you can use sencha.src to do this as well.
With that you'll not have any stretched images.