如何在不使用確切位置的情況下從中心縮放圖像

Question

我有一個HTML代碼的圖片。

當鼠標在圖像上時，我使用jquery來縮放它 - 但是圖像從左側和頂部放大，我希望它從中心縮放。

我在stackOverFlow中搜索並且每個人都使用位置attr但我不使用它。

這是我的示例代碼：

<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="https://i.stack.imgur.com/8UkZF.png"> </div> 

Answer 2

您可以在放大的同時調整top和left位置。

-1rem似乎很合適。

 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: "-1rem", left: "-1rem" }, 150); $('#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", top: 0, left: 0, }, 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 3

這是因為你實際上並沒有縮放，而是增加了容器的高度。 我建議在CSS3中使用不同的方法;

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

$(document).ready(function () {
    $('#menu-item-948').hover(function () {
        $(image).addClass('zoom-in');
    },function () {
        $(image).removeClass('zoom-in');
    });
});

CSS：

.your-image-element {
   -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
     -ms-transform-origin: center center;
      -o-transform-origin: center center;
       transform-origin: center center;
   -webkit-transform: scale(1);
    -moz-transform: scale(1);
     -m-transform: scale(1);
      -o-transform: scale(1);
   transform: scale(1);
   -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
}

.your-image-element.zoom-in {
   -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
     -ms-transform: scale(1.15);
      -o-transform: scale(1.15);
       transform: scale(1.15);
   -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
}

閱讀有關變換

了解過渡

閱讀有關變換原點的信息