使用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宽度。 那会起作用（不是您想要的那样，但是会动画）。

Nikita Vasilyev为自动值问题制作了一个js解决方案：

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

Answer 3

我认为没有唯一的CSS方式，但是您可以使用javascript设置值，然后让CSS过渡处理动画。

（函数init）您需要实现类似这样的方法而不是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>