使用CSS3

Question

让我们说，我需要制作缩小图像的动画。这个图像是由我的网站用户设置的，我不知道它的大小。所以，页面上有一个随机图像，当访问者点击按钮时，它会缩小图像（嗯，这不是真的是什么我正在寻找，但我需要那个动画）。 JavaScript / jQuery在我的示例中仅使用 来告诉您，我的观点是什么。

在此文本下，您可以看到我的代码和示例。我的目标是，将图像调整为宽度，并且您看不到它的全高。当你点击“切换”锚点时，它应该缩放图像方式，它会将图像调整到全高，并且它将居中。

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

Answer 1

也许这就是你要找的东西？

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

Answer 2

我发现转换目前无法使用自动值。你可以给img一个像素/百分比或em宽度。这将有效（不是你想要的，但它会动画）。

尼基塔·瓦西里耶夫为汽车价值问题制定了一个解决方案：

http://n12v.com/css-transition-to-from-auto/

Answer 3

我不认为这只是一种css方式，但您可以使用javascript设置值并让css转换处理动画。

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

（功能切换）然后，您只需根据＆＃39;缩放＆＃39;更改图像的大小。数据;

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

＆＃13;

＆＃13;

$(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'));
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;