1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    5
    Vote Rating
    0
    justinisrael is on a distinguished road

      0  

    Default Image resize to fit, maintaining aspect ratio

    Image resize to fit, maintaining aspect ratio


    Hi All,
    I'm a newbie writing my first Sencha Touch app targeting an ipad display. I have been searching and searching for an answer to this but what I find seems to pertain to the Ext frameworks Resizable or not exactly solves my problem...
    When you have a panel whose sole purpose is to display an image via a tpl, how do you get the mix of css and events right to keep the image resizing with the panel, maintaining aspect ratio AND not overflowing when one dimension becomes larger than the panel?

    Basically I need the image to always fit the panel and maintain aspect. I wish there was just an existing ImagePanel class that completely handled the underlying image size, but as far as I can tell, this solution still requires listening to resize events and dynamically calculating a new size based on various parent dimensions.

    Any ideas???
    (BTW I'm actually a python programmer, and I never have to deal with DOMs so you can imagine how frustrated I must be LOL). Thanks!

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    57
    Vote Rating
    2
    Hertz is on a distinguished road

      0  

    Thumbs up


    CSS alone can handle this.
    You can either asign a class to each image or use descendant selectors, for example, if you set an id of "my-panel" to a panel, in your .css file, you add a rule with this:

    Code:
    #my-panel img {
    width: 100%;
    }
    This has worked for me.
    You can also try height: 100% (or min-width / max-width, etc.) depending on your needs.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    5
    Vote Rating
    0
    justinisrael is on a distinguished road

      0  

    Default


    Ya, thats what I have been trying so far. I have something like this:
    Code:
    .landscape img{
    	width: 100%;
     	height: auto; 
    }
    
    .portrait img{
    	width: auto;
     	height: 100%; 
    }
    and a Panel tpl like:
    Code:
    '<div align="center" class="{[this.portrait(values.width, values.height)]}">',
    	'<img src="{imgUrlHi}"">',
    '</div>',
    {
    	compiled: true,
    	portrait: function(w,h) {
    		if (h > w) {
    			return 'portrait';
    		}
    		return '';
    	}
    }
    Its fine for maintaing the aspect of the image, but if the width is 100%, the height always seems to grow beyond the Panel boundaries, where what I would want is for it to stop at the dimension of the panel. max-width/height end up causing uneven scaling once it hits the max-height and the width keeps going.
    It seems like what I want is a 100%/auto that switches between width and height dynamically to always keep the image completely within the panel. But I'm confused as to why I would have to write this seemingly low-level functionality. Is there something within the Touch framework that handles displaying an image that is always scaled to fit w/ aspect?

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    5
    Vote Rating
    0
    justinisrael is on a distinguished road

      0  

    Default


    Ya, thats what I have been trying so far. I have something like this:
    Code:
    .landscape img{
    	width: 100%;
     	height: auto; 
    }
    
    .portrait img{
    	width: auto;
     	height: 100%; 
    }
    and a Panel tpl like:
    Code:
    '<div align="center" class="{[this.portrait(values.width, values.height)]}">',
    	'<img src="{imgUrlHi}"">',
    '</div>',
    {
    	compiled: true,
    	portrait: function(w,h) {
    		if (h > w) {
    			return 'portrait';
    		}
    		return 'landscape';
    	}
    }
    Its fine for maintaing the aspect of the image, but if the width is 100%, the height always seems to grow beyond the Panel boundaries, where what I would want is for it to stop at the dimension of the panel. max-width/height end up causing uneven scaling once it hits the max-height and the width keeps going.
    It seems like what I want is a 100%/auto that switches between width and height dynamically to always keep the image completely within the panel. But I'm confused as to why I would have to write this seemingly low-level functionality. Is there something within the Touch framework that handles displaying an image that is always scaled to fit w/ aspect?

Similar Threads

  1. Ext.Resizable aspect ratio
    By joec2000 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 21 Jan 2011, 7:19 AM
  2. How to resize image
    By rubynile in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 22 Dec 2009, 7:27 AM
  3. Preserve Aspect Ratio while Holding Shift
    By bryman55 in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 8 Feb 2009, 1:21 AM
  4. resizeable Window and aspect ratio.
    By rahulmca1@gmail.com in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 11 Mar 2008, 6:59 AM
  5. Keep aspect ratio of images in HtmlEditor?
    By gizzmo in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 15 Feb 2008, 1:57 PM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi