使用 CSS3 缩小图像

Question

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

 $(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/

原文由 Patrik Krehák 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

也许这就是您要找的？

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

原文由 larspeeters 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不认为只有 css 方法，但您可以使用 javascript 设置值并让 css 转换处理动画。

（函数初始化）你需要实现 这样 的东西而不是那个 setTimeout（它只是让你知道图像何时加载）然后你运行一些计算并将该数据存储在 img 标签中。

（功能切换）然后您只需根据“缩放”数据更改图像的大小；

我认为这是达到预期效果的最简单方法

 $(function() {

  function init(img){
    var sizes = {
          iHeight: img.height(),
          iWidth: img.width(),
          pHeight: img.parent().height(),
          pWidth: img.parent().width()
        };
    sizes.prop = sizes.iWidth / sizes.iHeight;
    img.data('zoom', false).data('sizes',sizes).width(sizes.iWidth).height(sizes.iHeight);
  }

  function toggleZoom(img){
    var hasZoom = img.data('zoom'),
        sizes = img.data('sizes');
    if(!hasZoom){
      img.width(sizes.prop * sizes.pHeight).height(sizes.pHeight);
    }else{
      img.width(sizes.iWidth).height(sizes.iHeight);
    }
    img.data('zoom', !hasZoom);
  };

  setTimeout(function() {
    init($('#test img'));
  }, 300);

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

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

 <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>

原文由 Sebastián Gaviria 发布，翻译遵循 CC BY-SA 3.0 许可协议