如何在按下 LMB 时使 image/div 变小？

Question

所以，我在页面中间有一张图片（我希望它保留的位置），当我按住 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 获取该目标（但图像的位置发生变化并且不再居中）。

提前致谢！

Answer 1

尝试

transform: scale(0.7)

而不是身高。它将居中并且效率更高（GPU 使用）

Answer 2

仅使用 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>

Answer 3

这应该有效：

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

.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.0/jquery.min.js"></script>
<body>
    
        <div class = "centered">
            <img id = "banana" src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="banana.png">
        </div>
    
</body>

Answer 4

将 LMB 放在图像上而不是 div 并使用宽度而不是高度

$(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>

Answer 5

向您的 body 添加和删除 class 并间接转换您的图像：

$(document).ready(function() {

  const body = $('body');
  const cssClassClicked = 'lmb-clicked';

  body
    .mousedown(function() {
      body.toggleClass(cssClassClicked)
    })
    .mouseup(function() {
      body.toggleClass(cssClassClicked)
    });

});

body {
  min-height: 100vh;
  background: #eee;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.img {
  display: block;
  transition: transform 300ms ease-in-out;
  will-change: transform;
}

.lmb-clicked .img {
  transform: scale(0.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class="img" src="https://picsum.photos/id/1/400/300">

如何在按下 LMB 时使 image/div 变小？

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

javascript

html

jquery

css

jquery-click-event