Understanding Fit to Box, Fit to Width etc

I have implemented the File Manipulation > Upload Files behaviour in a CMS I've built but I'm having trouble understanding how best to deal with Portrait and Landscape images.

I have set the Upload Files behaviour to create thumbnails at a specific size (400x300) and I understand that if the image is portrait, or the dimensions aren't 4:3, that the behaviour is filling in a background colour to compensate.

This looks ugly though:
http://www.stranraermusictown.org.uk/gallery-photographs.php?cat=2

Is there a way to simply fill out the thumbnail with the entire image or, at least, make sure it fits width ways? I'm aware there are other settings within the behaviour but I just don't have the time to spend hours trial-and-error'ing all the options.

In the help section it states...
Fit to box - will resize the image to fit within a specified height and width.
Fit width - will resize the image to fit within a specified width.
Fit height - will resize the image to fit within a specified height.
Fixed width and height - will resize all images to a specified width and height while maintaining the width-to-height ratio. If the resized image does not completely match the specified width and height, a fill color is applied.

Fit to box - won't work because portrait images will look squashed.
Fit width - won't work because the height will remain in ratio and therefore all the thumbnails will be of a different size
Fit height - as above but width will remain in ratio
Fixed width and height - leaves ugly spaces around the images

What is the best solution to this?
Thank you
NJ

I wouldn't use the resize option in the upload behavior for creating the thumbnail in this case.

Use Image Resizer and the crop form center option for the thumbnail.

Where is Image Resizer?
Can it be integrated with an INSERT/UPDATE form?

WebAssist -> Image Resizer


No it cannot be integrated with the insert update form.

The idea behind image resizer is that you upload only one large image to the server and use that image on your pages and specify a desired width and height.

at run time, if one does not exist already, it will create a new copy of the image using the image resizer settings.

This allows you to have one image, but create multiple copies of it throughout the site. maybe on one page it shows at 50% width and height, on another at 25% width and height.

This becomes beneficial if you later decide to change the dimensions, you don't need to reupload the image, just edit the width and height of the image tag and the new size is generated automatically.

The thumbnail images are held in a MySQLi repeat region AND they integrated with a slider:

<?php
while(!$rsGALLERY->atEnd()) {
?>
<img id="IMAGEID<?php echo($rsGALLERY->getColumnVal("SMTgalleryID")); ?>" src="photographs/gallery/<?php echo($rsGALLERY->getColumnVal("SMTgalleryimg")); ?>" alt="<?php echo($rsGALLERY->getColumnVal("SMTgalleryimgtitle")); ?>" title="#IMAGEID<?php echo($rsGALLERY->getColumnVal("SMTgalleryID")); ?>_caption" data-thumb="photographs/gallery/tmb/<?php echo($rsGALLERY->getColumnVal("SMTgalleryimg")); ?>" />
<?php
$rsGALLERY->moveNext();
}
$rsGALLERY->moveFirst(); //return RS to first record
?>

In the above code the thumbnail is specified here:
data-thumb="photographs/gallery/tmb/<?php echo($rsGALLERY->getColumnVal("SMTgalleryimg")); ?>"

How would I implement image resizer in this instance?

More generally though, say I have a thumbnail image on a page:
<img src="image.jpg"/>

How am I applying Image Resizer to this? In the help it states..

1.Before launching Image Resizer, highlight the area, or section of code on your page that will contain the images you are resizing.

Does this mean highlight the image tag? Or can it be applied to a div tag for example?

Thank you
NJ

image resizer wont work for this, the thumbnail would need to be a separate image tag for image resizer to be able to resize the iamge.


if you use this method, the only work around will be to resize the iamges manully in photo shop to crop them.

otherwise use a gallery script that allows for separate large and thumbnail images

in your image tag:
<img src="image.jpg"/>

you need to set width and height:
<img src="image.jpg" width="200" height="300" />

that width and height is used by image resizer when creating the new image

you can apply image resizer to the image tag, or the surrounding div, either will work as long as the image has a width and height specified.