Maintain Image Aspect ratio at runtime

[kpsmith]

I'm guessing the Maintain aspect ratio for images is only for the design environment. Is there a way to do the same at runtime? If not I'll add it to the suggestion box.

I have an Image object that I am dynamically loading with images of various sizes but they keep getting stretch or squished. I'd use a web or Thumblist object but I need to have objects layered on top of the object.

Any ideas?

[Desmond]

Hello,

You could resize the image object to the dimensions of the image you are about to load:

sImageFile = "image.jpg";
tImageInfo = Image.GetFileInfo();
Image.SetSize("Image1", tImageInfo.Width, tImageInfo.Height);
Image.Load("Image1", sImageFile);

You coudl get more complicated, figure out the math to reposition the newly sized object to the center of the page . . . if you really want to.

Give 'er a try. Let me know if it works for you!

[rhosk]

Do you Flash?

See if maybe this will help -

Scale

Let me know, I have the source code

[TJ_Tigger]

I ran into the same problem when I was playing around with a way to make a picture viewer. I made a function that would get the properties of the image and then adjust the image as it was displayed. This is very simple code and only looks for portrait or landscape pictures and adjusts the image accordingly. You should be able to modify appropriately to adjust for the correct ration of your image.

In making this function I wanted to make sure that I could view pictures that were taken and larger than the project, but ensure that they were displayed withing the confines of the project. You will also notice that a second image is referenced ("Image2"). This is a border around the picture and acts like a frame so I had to resize accordingly.

Anywho, here is the function:

function GetImage(landscape,portrait)
image = pic_table[ctr];
image_info = Image.GetFileInfo(image);
if (image_info.Width > image_info.Height) then
	iwidth = landscape
else
	iwidth = portrait
end
ratio = (image_info.Width / iwidth);
iheight = (image_info.Height / ratio);
Image.SetVisible ("Image1", false);
Image.SetVisible ("Image2", false);
Image.SetSize("Image2", (iwidth + 20), (iheight + 20));
Image.SetSize("Image1", iwidth, iheight);
Image.Load("Image1", image);
Image.SetVisible ("Image2", true);
Image.SetVisible ("Image1", true);
end

And here is an example of how I would use it.

ssfolder = Dialog.FolderBrowse("Select a folder that contains pictures.", _DesktopFolder);
pic_table = File.Find(ssfolder, "*.jpg", false, false, nil);
pic_count = Table.Count(pic_table);
ctr = 1;
GetImage(500,375)
Image.SetVisible("Image1", true);
Image.SetVisible("Image2", true);

I hope that helps
Tigg

[Corey]

One suggestion which falls off the beaten path is using javascript pop-ups too, I love 'em for image display and it's a cinch to have them resize to a picture at runtime dynamically, so you don't even have to know what size your images are to use them. I'm not suggesting that this is the nest way, just one way. For me, if point-and-go is the order of the day, Javascript is becoming a very attractive solution for dynamic image content.

In terms of making galleries I tend to size my images to a standard size first, just an old habit... As for keeping aspect ratio at runtime I would probably get the image size dynamically and then calculate the aspect ration by dividing the y into the x and then resizing my image according to that ratio, i.e. an image at 800 X 600 becomes 600 pixels wide at 450 pixels tall if 4:3 is the ratio...

Corey Milner
Creative Director, Indigo Rose Software

[kpsmith]

Thanks for all the great responses.....

Tig...You win the prize... that was exactly the solution I was looking for and handed to me on a silver platter too.

Now if only I could spell ratio correctly....

[kpsmith]

Here's the final function I used for anyone that needs it. Essentially it requires 4 values:

maxwidth = the maximum width your image can be
maxheight = the maximum height your image can be
centerX = the X value of your center x,y position
centerY = the Y value of your center x,y position


--**************************************************
-- RESIZE_CENTER FUNCTION
--**************************************************
function RESIZE_CENTER(maxwidth, maxheight, centerX, centerY)
--If width larger than height resize based on width
if (ImageWidth > ImageHeight) then

iwidth = maxwidth --set width to max specifed in function call
ratio = (ImageWidth / iwidth); -- determine ratio
iheight = (ImageHeight / ratio); -- set height based on ratio

--else height is larger and resize based on height
else
iheight = maxheight -- set height to max specified in function call
ratio = (ImageHeight / iheight); --determine ratio
iwidth = (ImageWidth / ratio); -- set width
end

-- Determine top left X & Y based on Image center coordinates sent in function call
CoordX = centerX - (iwidth / 2);
CoordY = centerY - (iheight / 2);
end

--------------------------------------------------------------

--Sample Project actions using this function

--Get Image Info
ImageInfo = Image.GetFileInfo("AutoPlay\\Images\\indigorose.pn g");

--Set Image Height & Width based off of Info
ImageWidth = ImageInfo.Width
ImageHeight = ImageInfo.Height

--Call the function with max X,?Y of 475 pixels and Center of 456,245

RESIZE_CENTER(475, 475, 456, 245)

--Hide Image
Image.SetVisible("Image", false);

--Set Image Size based on function results
Image.SetSize ("Image", iwidth, iheight);

--Set Image position based on function results
Image.SetPos("Image", CoordX, CoordY);

--Load the image using the image path
Image.Load ("Image", "AutoPlay\\Images\\indigorose.png");

--Set the image Visible again
Image.SetVisible("Image", true);