NetTalk Central

NetTalk Web Server => Web Server - Ask For Help => Topic started by: Devan on April 11, 2012, 03:57:27 AM

Title: Display image in form with aspect ration preserved
Post by: Devan on April 11, 2012, 03:57:27 AM

Ok, third time's the charm today... ;D I've researched it as much as I can without success...

I need to show an image in a form.  I've set up a 'Display' field, with the field containing the path to the image as the source.  For layout reasons, I don't want any image to be wider than 150 pixels, so I have set up the 'Image Width' as being '150'.  I have left the 'Image Height' blank.

We are pretty close.  Where there is no data in the ImageSource field, nothing is displayed which is great.  However, where there IS an image, it seems to be 'stretched' out so the height seems to match the width.

I'd really like the image to be scaled to 150 width but retain the aspect ratio for the height (some are landscape, some are portrait - I don't care about the height of the image).  Is that possible at all?

Cheers,
Devan

Title: Re: Display image in form with aspect ration preserved
Post by: MikeR on April 11, 2012, 05:37:53 AM

use the following java script, give it a max height and width , it will resize and keep ratio (ie no stretch)


function resize(img, h, w) {                 

                                var elem = img;

                                var newImg = new Image();
                    newImg.src = elem.src;
                    var height = newImg.height;
                    var width = newImg.width;

                    var perc;

                    if (width > height) {                             
                                                frac = (h / width);
                    }
                    else {                 
                                                frac = (w  /height);
                                }

                    elem.width = elem.width * frac;
                    elem.heigth = elem.height * frac;

                }

Title: Re: Display image in form with aspect ration preserved
Post by: DonRidley on April 11, 2012, 07:22:21 PM

I think NT (NT6 in this case) can handle this without any special coding.

Check out my equate value in my screenshot. 

When I set up my image display like this, the aspect ratio is handled correctly.

Don

[attachment deleted by admin]

Title: Re: Display image in form with aspect ration preserved
Post by: Devan on April 11, 2012, 08:21:26 PM

Mike & Don,

Thanks for the responses!

Don - My image setup is pretty much exactly as the screenshot you uploaded here.  I thought that CSS automatically retains the aspect ration if you only specify ONLY height or ONLY width?

Strangely, it seems to be setting the height component to be the same as the width for some reason.  I'm on NT6.26...

Title: Re: Display image in form with aspect ration preserved
Post by: Bruce on April 11, 2012, 10:06:22 PM

which browser are you using Devan?

Title: Re: Display image in form with aspect ration preserved
Post by: Devan on April 11, 2012, 10:30:06 PM

Bruce - currently working and testing on Chrome 18.0.1025.151 m