1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    16
    Vote Rating
    1
    403 is on a distinguished road

      0  

    Default Answered: Carousel image re-sizing

    Answered: Carousel image re-sizing


    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

    Code:
    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);
    });

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Inspect the DOM, in this case they are background-image so is there a background-size CSS rule?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    16
    Vote Rating
    1
    403 is on a distinguished road

      0  

    Default


    This did the trick:
    Code:
    .x-img {background-size:100% 100%;}
    Thanks

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    106
    Answers
    5
    Vote Rating
    5
    lgertel is on a distinguished road

      0  

    Default


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

Thread Participants: 2

Tags for this Thread