Smoothly scale an img and automatically scrollIntoView-CodePudding

I am trying to set up a basic functionality to smoothly toggle an img on click from being longer than screen to being on a display (fit to window size) (back and forth). It kinda works already using percentages etc.

My issue is I'd like to have a smooth animated transition between the 2 states but the img is being brutally scaled. Also whenever I try to work with "transition" or "animation", when the img come back to its original size, it will block the scrolling. Same issue happened after I tried to use keyframes.

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <style>
        img {
            margin: auto;
            display: block;
            padding: 2%;
            width: 90vw;
            box-sizing: border-box;
        }
        .scaled {
            width: auto;
            height: 100vh;
        }
        
    </style>
</head>
<body>
    <img class="item" src="images/kitten1.png"> 
    <img class="item" src="images/kitten2.png">
    <img class="item" src="images/kitten3.png">
</body>
<script>
    $(".item").click(function() {
        $(this).toggleClass('scaled');
        $(this).scrollIntoView();
    });
</script>
</html>

Also I'd like to have the window view (by that I mean the location of the scrolling on the page) centered on the img whenever it is scaled. I am currently trying to use scrollIntoView for that purpose but nothing seems to happen.

Thank you in advance. First time posting here. I don't feel like this should be too difficult but will probably be on a different level than what I can figure out for now ଘ(੭ˊᵕˋ)੭ ̀ˋ

Also tried the following, but the img stay stuck at 90vw and 100vh ...

<!DOCTYPE html>
<html>

<head>
    <script src="jquery.js"></script>
    <style>
        img {
            margin: auto;
            display: block;
            padding: 2%;
            width: 90vw;
            box-sizing: border-box;
            object-fit: contain;
        }
    </style>
</head>

<body>

    <img class="item" src="images/kitten1.png">
    <img class="item" src="images/kitten2.png">
    <img class="item" src="images/kitten3.png">

</body>
<script>
    $(".item").click(function() {
    if ($(this).hasClass('scaled')) {
        $(this).animate({
            height: "none",
            width: "90vw"
        }, 1000);
        $(this).removeClass('scaled');
    }
        else {
            $(this).animate({
            width: "none",
            height: "100vh"
        }, 1000);
        $(this).addClass('scaled');
        }
    });

</script></html>

CodePudding user response：

To scroll to clicked item, use $(this)[0].scrollIntoView(); because .scrollIntoView() is JavaScript function, not jQuery.

CSS does not support from auto width to specific width or the same to height. Reference: 1, 2
There is a trick, use max-width or max-height for both CSS class.

Full code:

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <style>
        img {
            margin: auto;
            display: block;
            padding: 2%;
            max-width: 100vw;
            box-sizing: border-box;
            transition: all .3s;
        }

        .scaled {
            max-width: 50vw;
        }
    </style>
</head>
<body>
    <img class="item" src="images/kitten1.png"> 
    <img class="item" src="images/kitten2.png">
    <img class="item" src="images/kitten3.png">
</body>
<script>
    $(".item").click(function() {
        $(this).toggleClass('scaled');
        $(this)[0].scrollIntoView({
            behavior: "smooth"
        });
    });
</script>
</html>

See it in action