1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    18
    Vote Rating
    0
    studio4development is on a distinguished road

      0  

    Default Unanswered: Stop img from stretching

    Unanswered: Stop img from stretching


    I have an image sitting in a vbox layout:

    Code:
    {
         xtype:'img',
         mode:'image',
         src:'resources/images/phone-startup-logo-feature.png',
         width:'100%'
    },
    Everything looks good in my browser for the image's size. Then I build, deploy to my server, and pull it up on an actual phone and suddenly the image is way too tall. It looks like it correctly scaled down the width, but it kept it stretched at the original height.

    I tried setting height to 'auto', no difference. I tried leaving size out altogether and the image stopped scaling down at all and want way off the screen.

    How can I get the image to scale down with the correct aspect ratio to fit within the available width?

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Vote Rating
    9
    Answers
    13
    in4p will become famous soon enough

      0  

    Default


    To scale down the image you will need to explicitly calculate the desired height and width parameters (according to the aspect ratio of the picture) and set them for the picture.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    18
    Vote Rating
    0
    studio4development is on a distinguished road

      0  

    Default


    There is really no mechanism in the layout system for handling an aspect-ratio scale? That seems like a very core behavior for displaying images...especially in a responsive web world where sizes are always changing.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Vote Rating
    9
    Answers
    13
    in4p will become famous soon enough

      0  

    Default


    Sorry buddy. Maybe someone from the Sencha team will weigh in and say I'm wrong, but the core behavior is that it will display the image fullsize properly in the correct aspect. As soon as you resize it yourself by modifying the config parameters you're overriding the default behavior.

    Regardless, it really is an easy function to write to resize the image. Add a listener to the proper event, say the painted event, read in the natural heigh/width, calculate the ratio and resize the element.

  5. #5
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


    I don't know if you checked this out, but I think it may help
    http://rwbaker.com/articles/scaling-...encha-touch-2/

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Vote Rating
    9
    Answers
    13
    in4p will become famous soon enough

      0  

    Default


    I stand (somewhat) corrected. Thanks @jerome76
    Quote Originally Posted by jerome76 View Post
    I don't know if you checked this out, but I think it may help
    http://rwbaker.com/articles/scaling-...encha-touch-2/

  7. #7
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Just putting in my two cents

Thread Participants: 2

Tags for this Thread