[SOLVED] How to make image/div smaller when LMB is being pressed?

How to make image/div smaller when LMB is being pressed?

So, I have an image in the middle of the page (where I want it to remain) and while I hold the LMB I want it to get a little bit smaller, then go back to its previous size when released.

Below the code:

$(document).ready(function() {
        $("#banana").mousedown(function() {
            $("#banana").css("height","70%");
        });
        
        $("#banana").mouseup(function() {
            $("#banana").css("height","100%");
        });
    });

    .centered {
        text-align: center;
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div id = "banana" class = "centered">
            <img src="https://via.placeholder.com/150" alt="banana.png">
    </div>
</body>

I tried get that target using jQuery (but the position of the image changes and it is not centred anymore).

Thanks in advance!

Solution

This is very easy to do with CSS only, using the :active pseudo-selector (that corresponds to "mousedown"). Also why not use Flex for easy centering.

.container {
  border: #00f solid 1px;
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container img {
  transition: all 0.3s ease-in-out;
  transform: scale(1);
}
.container img:active {
  transform: scale(0.8);
}

<div class="container"><img src="https://via.placeholder.com/150"/></div>