I have a bunch of images with varying sizes. How do I re-size them while maintaining proportions?

Question

This is a bit more tricky than it sounds so let me try my best to explain.

I am specifically working with images of clothing from sites like HM and Net-a-porter. I would like to add these images to my website, stacking them vertically so that they create an outfit.

I need to re-size the shirt so that it proportionally sits on top of the jeans. The dimensions of the jeans are fixed at 100px width by 250px length. When I resize the shirt to the same width it (100px) it SOMETIMES matches. Using a different shirt (perhaps one with longer sleeves, no sleeves, etc) will result in mixed results and will not match the 100px width waistline of the jeans.

When saved these pics contain a certain amount of white space within the jpeg that varies from image to image. I have tried resizing with and without the white space (by cropping it down to the edges of the item) but this did not help either.

This is all supposed to be an automated process (like using the clipper tool on Pinterest of Polyvore) therefore non of the above can be done through photoshop or by hand, which makes it all the more difficult.

A screenshot of my problem can be found here:

I have also researched pixel counter scripts and have wondered if resizing can be done by counting the pixel width of the waistline of the clothing item (excluding all white pixel data) ??

I feel like I'm reaching into that particular are of "it cant be done, too many variables" and would love for someone to at least point me in the right direction. Thanks alot!

Answer 1

Use CSS max-width and max-height to set the proportions. That will scale everything appropriately.

For example:

img { max-width: 100px; }

Here's a JS Fiddle: http://jsfiddle.net/KSzhS/

It isn't too difficult to do.

Here's a function that I wrote for doing "basically" the same thing, but instead of analyzing clothing, it's analyzing letters. It's written in PHP, but if you can use HTML5, you can do it on the client-side too.

/**
* Function: Returns the space between letters, and the width of letters.
*           The first index is set to 0, as that is where it starts
*           Since spaces don't register (no pixels), strlen may not work.
* $image image cursor (from imagecreatetruecolor)
*/
function get_letter_dimensions($image)
{
   $bg           = imagecolorallocatealpha($image, 0, 0, 0, 127);
   $height       = imagesy($image) - 1; // was causing issues without
   $width        = imagesx($image);
   $bottom       = 0;
   $right        = 0;
   $letter_space = array(0=>0); // This holds the pixels between the letters
   $letter_width = array(0=>0); // This holds the width of the letters
   $y            = $height;
   $spacing      = 0;
   $lettering    = 0;
   $data         = array();

   for ($x = 0 ; $x < $width ; $x++) 
   {
      while((imagecolorat($image, $x, $y) == $bg) && ($y >= 1 )) $y--;

      if($y == 0) 
      {
         if($lettering) $letter_width[] = $lettering;
         $lettering = 0;
         $spacing++;
      }
      else
      {
         if($spacing) $letter_space[] = $spacing;
         $spacing = 0;
         $lettering++;
      }
      $y = $height;
   }

   foreach($letter_space as $k=>$val) $data[$k] = $val + $letter_width[$k];

   return $data;      
}

You're going to need to modify that though, so that it doesn't pull in for letters, but you'd start at the beginning, and when you hit a non-clear or white pixel, you'd mark it, and start at the end. Then you'll have your points of reference.

It's just some simple maths, and clothing analysis. If you're interested in having the "waist-lines" match up, you'll probably want to start at the bottom, and go up, for the images of the shirts. Then you can see where a "line" of pixels are, which would represent where the waist is. And base your calculations off of that.

So, if you want to help yourself out, start echoing the results from the function provided, so that you can see what it looks like

Example

------------------------------
------------------------------
------------------------------
------------------------------
-------**-------------**------
------*--*-----------*--*-----
-----*-------------------*----
------------------------------
----------***********---------
--***---------------------***-
------------------------------

That's if you're going from bottom to top, and you can "see", where the waist line is. Then count pixels, and resize from that. You can modify this function to make another auto-cropping function. Also, if you want, modify this function so you can start from the top, or go horizontal and start from either side. You can even get crazy and allow offsets to be used.

Once you have that type of information set up, you can really start to find out what you're working with. If you're dealing with images where the pixel at 0,0 will NEVER be used, you can try to use that as the background color. That'll help with the auto-cropping functionality.

The more points of measurement you make, the more intelligent you can make your analysis. And if you have access to information about what you're looking at, for example, you have the images associated with other data, then you can take some short-cuts (so you won't have to do a bunch of analysis to know if you're working with "Pants", "Skirts", "Shirts" and "Dresses").

Edit: Additional Thoughts

Just thought about this a bit more... This is actually a pretty neat little thing that you're doing, and I'm thinking about writing my own version of it for fun. Here's some stuff that I've been thinking about. The implementation of how you're pulling in these images in, is important.

• Are you pulling all the data from a directory?
• Do you have the images already set up different so that you're aware of what you're pulling in?
• Do you know what image is a shirt, and what image is a pair of pants?

You can also set up a "vetting process", where you would store the offsets on the original image that gets scaled. This would allow for you to bypass calculations, and instead just look-up the stored data. Anyway, the "vetting process" would allow for you to double-check that the calculations are set, and then store them.

I don't know. I'll let you know if I do something like this though.