Results 1 to 7 of 7

Thread: Stop img from stretching

  1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    18
    Vote Rating
    0
      0  

    Default 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
    Answers
    13
    Vote Rating
    10
      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
      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
    Answers
    13
    Vote Rating
    10
      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
    Answers
    132
    Vote Rating
    101
      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
    Answers
    13
    Vote Rating
    10
      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
    Answers
    132
    Vote Rating
    101
      0  

    Default

    Just putting in my two cents

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
  •