How to make image/div smaller when LMB is being pressed?
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>Try
transform: scale(0.7)
instead of height. It will be centered and it's more efficient (GPU usage)
place the LMB on the image not the div and use width not height
$(document).ready(function() {
$("#pic").mousedown(function() {
$("#pic").css("width","70%");
});
$("#pic").mouseup(function() {
$("#pic").css("width","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 id='pic' src="https://picsum.photos/300" alt="banana.png">
</div>
</body>