"Fit within" / auto-resize?

floz · December 18, 2012 at 9:50 AM

Is there any easy way to fit an image/plugin within the viewer window?

As in, say, I want the image to resize proportionally, maintaining a certain prescribed minim amount of margin from each of the four viewer boundaries. Or, alternatively, say I want the image to be either 80% wide and/or 80% high, always resizing proportionally, and maintaining these conditions even if the window is resized?

I don't think I do a good job of explaining what I mean, but I hope you get the idea. So Basically a "fit within" / "auto resizing" within prescribed area, but maintaining aspect ratio, and supporting dynamic resizing of the viewer window.

Cheers,

Florian

floz · December 18, 2012 at 10:47 AM

Ok, found a solution with onresize event and a bunch of condition statements. However, is there an easier way that I simply missed? Cheers!

sachagriffin · December 18, 2012 at 3:35 PM

No that's about right. Here's what I use.

Code

if(plugin[photo].visible == true,
				push(plugin[%1].width);
				push(plugin[%1].height);
				plugin[%1].resetsize(); 
				pop(plugin[%1].height);
				pop(plugin[%1].width);
				set(imgwidth, get(plugin[%1].imagewidth));
				set(imgheight, get(plugin[%1].imageheight));
				set(maxwidth, get(stagewidth));
				if (ishtml5,sub(maxwidth, maxwidth, 50);
				,
				sub(maxwidth, maxwidth, 25);
				);
				set(maxheight, get(stageheight));
				if (ishtml5,sub(maxheight, maxheight, 50);
				,
				sub(maxheight, maxheight, 35);
				);
				if(imgwidth GT maxwidth,
					mul(imgheight, imgheight, maxwidth);
					div(imgheight, imgheight, imgwidth);
					copy(imgwidth, maxwidth);
				);
				if(imgheight GT maxheight,
					mul(imgwidth, imgwidth, maxheight);
					div(imgwidth, imgwidth, imgheight);
					copy(imgheight, maxheight);
				);
				tween(plugin[%1].width,  get(imgwidth),,easeOutQuad);
				tween(plugin[%1].height, get(imgheight),,easeOutQuad);
			);

Display More

klaus.krpano · December 18, 2012 at 7:43 PM

Hi,

here some example code:

Code

<layer name="bg" url="test.jpg" align="center" ... onloaded="bg_automatic_fit_inside()" />


<events name="bg_scale" onresize="bg_automatic_fit_inside();" />


<action name="bg_automatic_fit_inside">
    if(layer[bg].loaded,
        div(screenaspect, stagewidth, stageheight);
        div(imageaspect, layer[bg].imagewidth, layer[bg].imageheight);
        if(imageaspect GT screenaspect,
            set(layer[bg].width,80%); set(layer[bg].height,prop);
          ,
            set(layer[bg].width,prop); set(layer[bg].height,80%);
         );
      );
</action>

Display More

Best regards,
Klaus

floz · December 18, 2012 at 9:49 PM

Thanks Sacha, and thanks Klaus for making me feel (momentarily) as clever as you -- this is quite exactly how I had implemented it last night:

Code

<plugin name="img_container_img" url="%SWFPATH%/images/S5.jpg" parent="img_container" width="80%" height="prop" align="center" oy="-4%" keep="true" onloaded="div(plugin[img_container_img].ir,get(imagewidth),get(imageheight)); update_img();" zorder="1001" />
<events onresize="update_img()" />
<action name="update_img">
	ifnot(get(plugin[img_container_img].ir),
		trace("NOT");
	,
		div(sr,stagewidth,stageheight);
		if(sr LT plugin[img_container_img].ir,
			set(plugin[img_container_img].width,80%);
			set(plugin[img_container_img].height,prop);
		,
			set(plugin[img_container_img].height,80%);
			set(plugin[img_container_img].width,prop);			
		);
	);
</action>

Display More

izoneguy · January 5, 2013 at 1:56 AM

Hello

I am trying to do the same thing….
I added another thumbnail that loads a blank pano….
I used the code to overlay the image and it works fine on desktop.

I added keep="false" because I want the image to go away when I load another pano….

Problem is - the image comes in a little big for iPhone/ipad and then it stays when
I click for a new pano???

"Fit within" / auto-resize?

Participate now!

Users Viewing This Thread