如何在不影響圖像尺寸的情況下對響應圖像進行中心縮放？

Question

我將jquery和css函數放在一起，以在鼠標懸停時放大和縮小圖像，同時保持約束框的大小不變。 我以這個為例，並對其進行了更多編輯。

演示在這里： https : //jsfiddle.net/2fken8Lg/1/

這是代碼：

JS：

 $('.zoom img').on({
   mouseover: function() {
     var $scale = 1.5;
     if (!$(this).data('w')) {
       var $w = $(this).width();
       var $h = $(this).height();
       $(this).data('w', $w).data('h', $h);
     }
     $(this).stop(true).animate({
       width: $(this).data('w') * $scale,
       height: $(this).data('h') * $scale,
       left: -$(this).data('w') * ($scale - 1) / 2,
       top: -$(this).data('h') * ($scale - 1) / 2
     }, 'fast');
   },
   mouseout: function() {
     $(this).stop(true).animate({
       width: $(this).data('w'),
       height: $(this).data('h'),
       left: 0,
       top: 0
     }, 'fast');
   }
 });

CSS：

.zoom {
  position: relative;
  float: left;
  margin: 30px 0 0 30px;
  width: 400px;
  height: 180px;
  overflow: hidden;
  border: 1px solid #000;
}

img {
  position: absolute;
  width: 400px;
  height: 180px;
}

HTML：

<div class="zoom">
  <img src="https://www.lamborghini.com/en-en/sites/en-en/files/DAM/it/models_gateway/blocks/special.png">
</div>

它在固定圖像大小的情況下效果很好，但是我的問題是如何將其擴展到響應圖像？ 我的網頁純粹基於響應能力，因此我無法在任何地方設置固定的CSS寬度或高度，因為它會弄亂不同的瀏覽器大小。 無論如何，有沒有要做我要為響應圖像完成的工作，或者沒有CSS？

Answer 1

正確的方法是在CSS中使用轉換，此答案歸因於用戶@Keith的建議。 下面的示例JS小提琴將描述如何在不影響響應性的情況下實現縮放中心外觀。

演示： https : //jsfiddle.net/2fken8Lg/2/

HTML：

<div class="zoom">
  <img src="https://www.lamborghini.com/en-en/sites/en-en/files/DAM/it/models_gateway/blocks/special.png">
</div>

CSS：

.zoom {
  position: relative;
  border: 1px solid #333;
  overflow: hidden;
  width: 100%;
}
.zoom img {
  max-width: 100%;

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.zoom:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}