How would I resize a image in jQuery to a consistent aspect ratio. For example setting maximum height and have the width resize correctly. Thanks.
A:
You could calculate this manually,
i.e.:
function GetWidth(newHeight,orginalWidth,originalHeight)
{
if(currentHeight == 0)return newHeight;
var aspectRatio = currentWidth / currentHeight;
return newHeight * aspectRatio;
}
Make sure you use the ORIGINAL values for the image otherwise it will degrade over time.
EDIT: example jQuery version (not tested)
jQuery.fn.resizeHeightMaintainRatio = function(newHeight){
if (this.aspectRatio == undefined)
this.aspectRatio = parseInt($(this).width() / $(this).height());
$(this).height(newHeight);
$(this).width(newHeight * this.aspectRatio);
}
Paul
2009-11-05 18:20:20
Is there a way to set the maximum width and height of an existing image like - ImageResize("imgID", maxWidth, maxHeight);I've tried similar techniques in PHP, but looking through the jquery plugins I couldn't find one that would do the trick.
usertest
2009-11-05 18:27:27
Explain what you mean by maximum. There are max width/height css attributes, is that not what you are looking for?
Paul
2009-11-05 19:16:43
Thanks. The second example is close to what I was looking for, but the example doesn't work. As far as I can tell one of the problems is that changing width or height should be set by the css() function. I tried that but the example still doesn't work. Is that because the aspectRatio isn't set?
usertest
2009-11-06 15:26:45
Ignore that last comment, I got it working with the css function as follows but how could I change the function so it takes in two values newHeight and newWidth and resizes the image by aspect ratio so that neither dimension is too big?
usertest
2009-11-06 16:23:47
jQuery.fn.resizeHeightMaintainRatio = function(newHeight){ if (this.aspectRatio == undefined) this.aspectRatio = parseInt($(this).css("width") / $(this).css("height")); $(this).css("height",newHeight); $(this).css("width",newHeight * this.aspectRatio); }
usertest
2009-11-06 16:27:26
A:
$("#some_image").resizable({ aspectRatio:true, maxHeight:300 });
aspectRatio: true -> maintain original aspect ratio
Jason Harwig
2009-11-05 18:34:08
Yeah, but that's a lot of overhead to invoke if you're not already using the UI.
Paul
2009-11-05 18:41:01
Of course it might very well be (s)he's already trying to replicate the functionallity of the resizeable plugin...calling resizeable is going to to a whole lot more than just resize the image, btw.
Paul
2009-11-05 18:45:08
IMO, If you're only using 1% of an API that could be replaced with 10 lines of code, I don't think you should you should be using the API. (Esp. with web APIs) At the same time, you need to evaluate the whole project in a case like this to make sure you aren't progressively rewriting something that already exists.
Paul
2009-11-05 18:48:44
A:
Here's a useful function that might do what you want:
jQuery.fn.fitToParent = function()
{
this.each(function()
{
var width = $(this).width();
var height = $(this).height();
var parentWidth = $(this).parent().width();
var parentHeight = $(this).parent().height();
if(width/parentWidth < height/parentHeight)
{
newWidth = parentWidth;
newHeight = newWidth/width*height;
}
else
{
newHeight = parentHeight;
newWidth = newHeight/height*width;
}
margin_top = (parentHeight - newHeight) / 2;
margin_left = (parentWidth - newWidth ) / 2;
$(this).css({'margin-top' :margin_top + 'px',
'margin-left':margin_left + 'px',
'height' :newHeight + 'px',
'width' :newWidth + 'px'});
});
};
Basically, it grabs an element, centers it within the parent, then stretches it to fit such that none of the parent's background is visible, while maintaining the aspect ratio.
Then again, this might not be what you want to do.
Eric
2009-11-05 18:50:31