Trying to resize (enlarge) an image with animate(). Didn't manage to resize it from center – always resizes from the top-left corner.
Is there a way to resize (enlarge) it from a centered registration point? Negative margins/positions didn't work.
A:
You will probably need to adjust the top and left position as you resize the image to give the effect of it resizing from the center, which means you will need to position it absolutely for the position change to take effect.
Nalum
2010-05-18 16:07:01
Thank you very much!
Tobi
2010-05-18 16:20:20
A:
You could put the image inside a div with a fixed size of what the image would be when it's the bigger size. Have css text-align: center for the div, and margin: auto for the image, then it should be centered within the div.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4");
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#test').animate({width: 300});
});
</script>
</head>
<div style="width: 400px; text-align: center; border: 1px solid red">
<img style="margin: auto;" id="test" src="http://www.google.se/intl/en_com/images/srpr/logo1w.png" width="131" height="98" alt="Picture 1"/>
</div>
</div>
</body>
</html>
baloo
2010-05-18 16:19:10