Results 1 to 4 of 4

Thread: Carousel image re-sizing

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    16
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Inspect the DOM, in this case they are background-image so is there a background-size CSS rule?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    16
    Vote Rating
    1
      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
      0  

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •