Image resize to fit, maintaining aspect ratio

[justinisrael]

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!

[Hertz]

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:

#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.

[justinisrael]

Ya, thats what I have been trying so far. I have something like this:

.landscape img{
	width: 100%;
 	height: auto; 
}

.portrait img{
	width: auto;
 	height: 100%; 
}

and a Panel tpl like:

'<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?

[justinisrael]

Ya, thats what I have been trying so far. I have something like this:

.landscape img{
	width: 100%;
 	height: auto; 
}

.portrait img{
	width: auto;
 	height: 100%; 
}

and a Panel tpl like:

'<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?