How can I resize an image to a set width and height while maintaining its aspect ratio?

There is likely a much more elegant way to do this, but what I've always done is something along these lines: 1) Let's assume that availableWidth and availableHeight define the target (fixed) area that you're resizing against. 2) Let's assume that imageWidth and imageHeight represent the CURRENT width and height of your uploaded image at any given point in time. 3) First, do an aspect-ratio-constrained resize locked to the value of availableWidth. This is done by adjusting the height of the uploaded image first, then setting the width: imageHeight = imageHeight x (availableWidth / imageWidth) imageWidth = availableWidth 4) The previous step assumes that the image is landscape-oriented (hence using width as the locking value) but it may not be, so we make a quick check to see if the height of the image exceeds our target height: if(imageHeight > availableHeight) 5) If this is the case, we apply step 3 again, but this time we use height as the locking value: imageWidth = imageWidth x (availableHeight / imageHeight) imageHeight = availableheight 6) At this point, we know we have an image that fits in the bounding area that we've defined, so it's just a matter of centering it vertically and horizontally within that area, which is accomplished via simple division and subtraction. I've always been under the impression that there's some sort of formula or algorithm that combines both the width and height steps above, but every time I've found myself having to do this, I've been too time-constrained to give it proper research : )

1. Upload picture 2. Get current width / height. 3. Calculate aspect ratio. 4. Set to new width / height (if one is fixed because of the front-end set only one and calculate the other through the aspect ratio) 5. Save image. Maybe this'll help (not mine, googled): http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php

Use something like this [code]$max = 1000; $tw  = <original width>; $th  = <original height>;         if ( <original height> > <original width>  && $max < <original width>) {             $th = $max / <original width> *  <original height>;             $tw = $max; } elseif ( <original height> > <original width> && $max < <original height>) {             $tw = $max /<original height> * <original width>;             $th = $max; } elseif ($max < $w) {             $tw = $th = $max; }[/code]

You can try this, http://code.google.com/p/timthumb/ coded in php, you can use it as a standalone script in any project. I have used it in two of my projects.

if you want to specify both height and width, then you can calculate the new height and width based on original dimensions using the aspect ration. In general, you can fix the width and let the library decided the height. For example,  http://www.thebuzzmedia.com/software/imgscalr-java-image-scaling-library/. The fixed width could correspond to what you need to show on your user interface.

I would think you could use CSS to set either the height or the width and then use background positioning within a div (overflow:hidden) to approximate "cropping". The position is something that could be set/adjusted by the person doing the uploading. This was a quickie off the top of my head so I might be mixing my Ps with my Qs a bit. None the less, I believe the basic idea is sound and ideally simpler.

I was struck by this problem recently. I had to reduce the size of some images for a customer’s website, but I had to keep the same aspect ratio so that the images look natural. The most simple and convenient solution that I found was http://www.ninjaunits.com/aspect-ratio-calculator/ and keep my proportions according to a new desired size: length or width.