如何在不影响图像尺寸的情况下对响应图像进行中心缩放？

Question

I put together a jquery and css function to zoom in and out of an image on mouseover, while keeping the constraining box size constant. I found this as an example, and edited more to what I would like.

Demo is here: https://jsfiddle.net/2fken8Lg/1/

Here is the code:

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>

It works great with a fixed image size, but my question is how do I expand it to responsive images? My webpage is based purely on responsiveness so I can't have a fixed css width or height anywhere because it would mess up different browser sizes. Is there anyway to do what I am trying to accomplish for responsive images, or without css?

Answer 1

The correct way to do this is to use transforms within css, this answer was due to a suggestion by the user @Keith. The example JS fiddle below will describe how to accomplish a zoomed-center look without affecting responsiveness.

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