所以，我在页面中间有一张图片(我希望它保留在那里)，而我拿着 LMB 我希望它变小一点，然后在发布时恢复到以前的大小。
代码下方:
$(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>我尝试使用 jQuery 获取该目标(但图像的位置发生了变化，并且不再居中)。
提前致谢!
最佳答案
仅使用 CSS 很容易做到这一点，使用 :active伪选择器(对应于“mousedown”)。还有为什么不使用 Flex 来轻松居中。
.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>关于javascript - 按下LMB时如何使图像/div变小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62955039/