All geek questions in one place

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

Attempting to resize (enlarge) an image using animation (). Failed to resize it from the center - always resizes in the upper left corner.

Is there a way to resize (enlarge) it from a centralized registration point? Negative fields / positions do not work.

+3
source share
2 answers

You may need to change the top and left positions when resizing the image to get the effect of resizing it in the center, which means you will need to fully position it to resize it.

+2
source

div , . Css text-align: center div margin: auto , div.

:

<!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>
0

Source: https://habr.com/ru/post/1746022/

More articles:


All Articles