html - 使用 CSS3 缩小图像

Question

假设我需要制作缩小图像的动画。此图片由我网站的用户设置，我不知道其分辨率。因此，页面上有一个随机图像，当访问者单击按钮时，它应该缩小图像。使用 JavaScript/jQuery 只有在我的例子中让你知道，我的观点是什么，所以 CSS 方法就是我正在寻找的。在这段文字下，您可以看到我的代码示例。当您单击“切换” anchor 时，它应该将图像放大。

$(function() {
  $('.toggle').click(function(e) {
    e.preventDefault();
    $('#test').toggleClass('active');
  });
});

#test {
  position: relative;
  width: 500px;
  height: 150px;
  overflow: hidden;
}
#test img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  transition: all 5s;
}
#test.active img {
  width: auto;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://www.blueverticalstudio.com/wp-content/uploads/2011/05/1303508174-torre-europa-0180-500x1000.jpg" />
</div>
<a href="#" class="toggle">Toggle</a>

编辑:

由于这个问题收到了很多意见，我更新了我在接受的答案中指出的旧 jsFiddle 作为解决方案。和你不好 不应该完全使用它。您有 99% 的机会不需要那样使用它。

https://jsfiddle.net/gej1zb67/

Answer 1

也许这就是你要找的？

#test.active img {
  transform: scale(2,2);
}