画像のサイズに影響を与えずに反応性画像をセンターズームする方法は？

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