does anyone knows how to resize image proportionaly using javascript?, i have tried to modify the DOM adding attributes height & Width on the fly, but seems did not work on IE6
A:
Instead of modifying the height and width attributes of the image, try modifying the CSS height and width.
myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";
One common "gotcha" is that the height and width styles are strings that include a unit, like "px" in the example above.
Edit - I think that setting the height and width directly instead of using style.height and style.width should work. It would also have the advantage of already having the original dimensions. Can you post a bit of your code? Are you sure you're in standards mode instead of quirks mode?
This should work:
myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
Neall
2008-10-04 16:44:52
+5
A:
To modify an image proportionally, simply only alter one of the width/height css properties, leave the other set to auto.
image.style.width = '50%'
image.style.height = 'auto'
This will ensure that its aspect ratio remains the same.
Bear in mind that browsers tend to suck at resizing images nicely - you'll probably find that your resized image looks horrible.
Dan
2008-10-04 16:47:26
A:
Tried the following code, worked OK on IE6 on WinXP Pro SP3.
function Resize(imgId)
{
var img = document.getElementById(imgId);
var w = img.width, h = img.height;
w /= 2; h /= 2;
img.width = w; img.height = h;
}
Also OK in FF3 and Opera 9.26.
PhiLho
2008-10-04 16:52:47
+2
A:
okay it solved, here is my final code
if($(this).width() > $(this).height()) {
$(this).css('width',MaxPreviewDimension+'px');
$(this).css('height','auto');
} else {
$(this).css('height',MaxPreviewDimension+'px');
$(this).css('width','auto');
}
Thanks guys
Ariel
2008-10-04 17:15:22
Incidentally, unless you have set a height on the image (either the `height` attribute, or via CSS), you don't need to explicitly set `height: auto` - it's set to that by default
Dan
2008-10-04 17:24:51
no when i resize the width without setting the height to auto it failed in IE6
Ariel
2008-10-04 18:28:21
Odd, I'm sure I've done that before and have it work. Anyway, I'll take your word for it :) You could apply that height:auto in a stylesheet, though
Dan
2008-10-05 00:03:33
I tried it on IE6 Win XP SP3, image 297px x 169px and resize the width to 100px but the height remain its original, but its probably Jquery add it automatically, i'll try to find out.
Ariel
2008-10-05 04:29:55
My understanding is that in jQuery, $() is a class constructor. That means that this code will always instantiate four wrappers for "this" when a single one would do if you stored it in a variable. I might even be tempted to store $(this) in a class-level variable in your constructor.
Joel Mueller
2008-10-05 20:51:58
joel you are right, but these block codes is a part of looping so $(this) here refer to the image itself as an object
Ariel
2008-10-08 07:04:47
A:
function resize_image(image, w, h) {
if (typeof(image) != 'object') image = document.getElementById(image);
if (w == null || w == undefined)
w = (h / image.clientHeight) * image.clientWidth;
if (h == null || h == undefined)
h = (w / image.clientWidth) * image.clientHeight;
image.style['height'] = h + 'px';
image.style['width'] = w + 'px';
return;
}
just pass it either an img DOM element, or the id of an image element, and the new width and height.
or you can pass it either just the width or just the height (if just the height, then pass the width as null or undefined) and it will resize keeping aspect ratio
A:
Use JQuery
`
var scale=0.5;
minWidth=50;
minHeight=100;
if($("#id img").width()*scale>minWidth && $("#id img").height()*scale >minHeight) {
$("#id img").width($("#id img").width()*scale);
$("#id img").height($("#id img").height()*scale);
} `
Tim
2010-03-08 21:34:21