如何在不影响图像大小的情况下对响应式图像进行中心缩放？答案

【问题标题】：How to center-zoom with responsive images without affecting the image size?如何在不影响图像大小的情况下对响应式图像进行中心缩放？
【发布时间】：2016-09-30 14:59:09
【问题描述】：

我将 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 吗？

【问题讨论】：

您可以使用变换和 css 动画。看看这个 CodePen。 codepen.io/afinedayproductions/pen/EzvLp
@Keith 这看起来很有希望，我将编辑我的 jsfiddle 看看它是否有效（我知道使用没有 js 的 jsfiddle 具有讽刺意味）

标签： javascript jquery html css image

【解决方案1】：

这样做的正确方法是在 css 中使用转换，这个答案是由于用户 @Keith 的建议。下面的示例 JS fiddle 将描述如何在不影响响应性的情况下实现缩放中心外观。

演示：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);
}

【讨论】：