如何在不影響圖像大小的情況下使用響應式圖像進行居中放大？

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); 
}