1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    11
    Vote Rating
    0
    urbanism is on a distinguished road

      0  

    Default Answered: Percentage Image Size With Xtype Image

    Answered: Percentage Image Size With Xtype Image


    Hi,
    I want to scale an Image percentage,
    when im writing something like
    {
    xtype: 'image',
    src: 'myimage.png'
    style:
    {
    'width': '50%',
    'height': '20%'
    }
    }

    the image is not shown. i also tried to put the size-stuff into a seperate css-file and adding the cls attribute but still no victory for me .
    If i'm using
    {
    html: '<image src="myimage" cls="myclsclass">
    }

    the sizing works. But i wont do that because after leaving the view and reentering the image is gone.
    So im looking for some help for how i can use percentage imagesizing with "xtype:image" or some advice how i can solve the disappering problem with the "html: <image....>".
    Thanks and sorry for my bad english,
    Urb

  2. The reason is because the image component by default is a <div> with background-url pointing to the url you provided. You can change the mode config to 'image' to have it be a <div> with an <img> element.

    Code:
    {
        xtype : 'image',
        src : '....',
        mode : 'image'
    }

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3541
    Vote Rating
    847
    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

      1  

    Default


    The reason is because the image component by default is a <div> with background-url pointing to the url you provided. You can change the mode config to 'image' to have it be a <div> with an <img> element.

    Code:
    {
        xtype : 'image',
        src : '....',
        mode : 'image'
    }
    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
    Nov 2011
    Posts
    11
    Vote Rating
    0
    urbanism is on a distinguished road

      0  

    Default


    Thanks for your fast reply.
    But after if changed the mode the image is not resizable in any ways i described before
    It just works if i use the chrome Developer Tools-> ElementsView and add the width to the element.style
    Greetz

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    11
    Vote Rating
    0
    urbanism is on a distinguished road

      0  

    Default


    If figured out that the styles if added are written to the outer-div whos holding the image

Thread Participants: 1

Tags for this Thread