JQUERY – How to resize an image from center (centered registration point)_问答_开发者

JQUERY – How to resize an image from center (centered registration point)

开发者 https://www.devze.com 2022-12-31 10:05 出处：网络

Trying to resize (enlarge) an image with animate(). Didn\'t manage to resize it from center – always resizes from the top-left corner.

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 cen开发者_如何学Pythontered registration point? Negative margins/positions didn't work.

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.

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>