Article Image
read
Sometimes you have an image or something else that has to be resized to fit into the bounds of another object.
Following function returns an object that contains the new width and height:
/**
* Fits a rectangle into anothers rectangles bounds
* @param rect
* @param bounds
* @returns {width: Number, height: Number}
*/
fitRectIntoBounds: function(rect, bounds) {
var rectRatio = rect.width / rect.height;
var boundsRatio = bounds.width / bounds.height;
var newDimensions = {};
// Rect is more landscape than bounds - fit to width
if(rectRatio > boundsRatio) {
newDimensions.width = bounds.width;
newDimensions.height = rect.height * (bounds.width / rect.width);
}
// Rect is more portrait than bounds - fit to height
else {
newDimensions.width = rect.width * (bounds.height / rect.height);
newDimensions.height = bounds.height;
}
return newDimensions;
}Positionize image in the center of a frame
To positionize an image in the center of another element (#imageFrame in this case), you can use following code.
The code only works if the image has been loaded already. Also note, that
IMG.naturalSizedoes not work in IE8. However, this is just an example code to demonstrate how to use the function above.
var frame = $("#imageFrame");
var img = frame.find('img');
// note: naturalSize does not work in IE8
var realSize = {
width: img.get(0).naturalWidth,
height: img.get(0).naturalHeight
};
var bounds = {
width: frame.width(),
height: frame.height()
};
var resized = fitRectIntoBounds(realSize, bounds);
img.css({
width: resized.width,
height: resized.height,
top: (bounds.height - resized.height) / 2,
left: (bounds.width - resized.width) / 2
});