Results 1 to 4 of 4

Thread: Percentage Image Size With Xtype Image

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    11
    Vote Rating
    0
      0  

    Default 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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,030
    Answers
    3976
    Vote Rating
    1368
      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 @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    11
    Vote Rating
    0
      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
      0  

    Default

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

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
  •