javascript - 如何在不使用精确位置的情况下从中心缩放图像

Question

我在 html 代码中有一张图片。

当鼠标在图像上时，我使用 jquery 对其进行缩放 - 但图像从左侧和顶部缩放，我希望它从中心缩放。

我在 stackOverFlow 中搜索，每个人都使用位置属性，但我没有使用它。

这是我的示例代码:

<div class="flex-col

let image = $('#navigation_bar img');

$('#menu-item-948').hover(function() {

  //   alert("top :"+position.top +" left : "+ position.left +" right: "+ position.right +" bottom: "+ position.bottom);
  $(image)
    .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-6.png")
    .animate({
        width: "5rem",
        height: "5rem",
        top: "0.5f",
        left: "0.5f"
      },
      50);
  $('#menu-item-948').append('<p id="text" >text</p>');
  $('#text').css('color', '#55EA00');

}, function() {
  $(image)
    .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png")
    .animate({
      width: "2.5rem",
      height: "2.5rem"
    }, 300);
  $('#text').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-col hide-for-medium flex-center" style="margin-left: 50%; margin-top: 10%">
  <ul id="navigation_bar" class="nav header-nav header-bottom-nav nav-center  nav-divided nav-uppercase text-center ">
    <li id="menu-item-948" class="menu-item menu-item-type-post_type menu-item-object-page  menu-item-948">
      <a href="https://matiloos.dts.company/demos/shop-demos/big-sale/" class="nav-top-link"><img id="pic1" src="https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png" style="position:relative;width: 2.5rem; height: 2.5rem"></a>
    </li>
  </ul>

我在导航栏中有很多这样的图片。

Answer 1

也许它可以只用 CSS 来实现:

img {
  transition: transform .5s;
  transform: scale(.5);
}

img:hover, img:focus {
  transform: scale(.7);
}


/* just for styling */

div {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  margin: 0;
  padding: 0;
}

<div>
  <img src="/image/8UkZF.png">
</div>