When a user uploads an image to be displayed on a webpage, we need to make sure that the image has the following:

a) fits correctly into a fixed height and width container without overflowing or any blank space.
b) displays in full image resolution (without shrinking or expanding image using CSS width and height).
c) image displayed is not skewed or distorted and keeping image ratio.

References to CodeIgniter libraries:
http://ellislab.com/codeigniter/user-guide/libraries/file_uploading.html
http://ellislab.com/codeigniter/user-guide/libraries/image_lib.html

By using CodeIgniter framework, I manage to achieve the above.

Workflow:

1) Upload the raw image using standard file upload form. Upload handling backend:

$config['upload_path'] = './data/product/';
$config['allowed_types'] = 'gif|jpg|png';
$config['file_name'] = 'product.png';
$config['overwrite'] = TRUE;
$config['max_size']	= '0';
$config['max_width']  = '0';
$config['max_height']  = '0';	

$this->load->library('upload', $config);

if(!is_dir($config['upload_path'])){
   	mkdir($config['upload_path'], 0755, TRUE);
}

if (!$this->upload->do_upload("file_upload")){ //Upload file
			redirect("errorhandler"); //If error, redirect to an error page
		}else{
  ...

2) Next, we will do image resizing. Set the configuration as below:

   
$upload_data = $this->upload->data();
$image_config["image_library"] = "gd2";
$image_config["source_image"] = $upload_data["full_path"];
$image_config['create_thumb'] = FALSE;
$image_config['maintain_ratio'] = TRUE;
$image_config['new_image'] = $upload_data["file_path"] . 'product.png';
$image_config['quality'] = "100%";
$image_config['width'] = 231;
$image_config['height'] = 154;
$dim = (intval($upload_data["image_width"]) / intval($upload_data["image_height"])) - ($image_config['width'] / $image_config['height']);
$image_config['master_dim'] = ($dim > 0)? "height" : "width";

$this->load->library('image_lib');
$this->image_lib->initialize($image_config);

if(!$this->image_lib->resize()){ //Resize image
	redirect("errorhandler"); //If error, redirect to an error page
}else{
     ...

Explanation: “maintain_ratio” parameter is set to TRUE. From code above, the container size used for this example is (231px × 154px) (W × H).

Before resizing, we need to know whether to use width or height edge as the hard-value. After the original image has been resized, either the original image width’s edge or the height’s edge will be the same as the container width’s edge or the height’s edge respectively. The one that is same has the hard-value length. We determine this using calculation below:

Ratio = (Original Image Width / Original Image Height) – (Container Width / Container Height)

If the ratio > 0, then original image has longer width than container width. Hence, we take the height as hard-value as it has shorter height ratio.
If the ratio < 0, then original image has longer height than container height. Hence, we take width as hard-value as it has shorter width ratio.
if ratio = 0, both width or height can be the hard-value.

The purpose of doing this is to ensure resized image is able to fill the container completely without white spaces.

See visual description below:

Above shows container and image with different sizes.

To determine which edge to be used as hard-value, we overlap the container and the original image. We will shrink the original image while keeping its ratio. The arrow indicates the shrinking direction. The edge of the image that first matches the container edge length will be the hard-value.

When either one of the edge matches the container edge, we stop resizing. The orange box represents the final image.

3) After resizing the image, we will crop it to fit into the container. Set the configurations as below:

$image_config['image_library'] = 'gd2';
$image_config['source_image'] = $upload_data["file_path"] . 'product.png';
$image_config['new_image'] = $upload_data["file_path"] . 'product.png';
$image_config['quality'] = "100%";
$image_config['maintain_ratio'] = FALSE;
$image_config['width'] = 231;
$image_config['height'] = 154;
$image_config['x_axis'] = '0';
$image_config['y_axis'] = '0';

$this->image_lib->clear();
$this->image_lib->initialize($image_config); 

if (!$this->image_lib->crop()){
       	redirect("errorhandler"); //If error, redirect to an error page
}else{
	redirect("successpage");
}

Note that ‘x_axis‘ and ‘y_axis‘ are set to 0. We don’t need to crop away any parts. We will use width and height parameters to generate the image part that we need.

Image resizing and cropping to fit into container is done.