CSS3 ile görüntüyü büyütme

Question

Diyelim ki, görüntüyü yakınlaştırmanın animasyonunu yapmam gerekiyor. Bu resim sitemdeki kullanıcı tarafından ayarlanmıştır ve onların boyutlarını bilmiyorum.Çok, sayfada rastgele bir görüntü var ve ziyaretçi düğmeyi tıkladığında, görüntüyü uzaklaştıracak (iyi, bu gerçekten değil) Ben arıyorum ama bu animasyona ihtiyacım var. JavaScript/jQuery benim örneğimde, ne anlama geldiğini bildirmek için sadece kullanılır.

Bu metinde kodumu ve örneğini görebilirsiniz. Amacım, resmin genişliğe yeniden boyutlandırılması ve tam yüksekliğini görmemeniz. "Geçiş" bağlantı noktasına tıkladığınızda, görüntüyü yakınlaştırmalı, görüntüyü tam yüksekliğe getirecek ve ortalanacak.

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

Belki de bu aradığınız nedir?

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

Answer 2

Geçişler şu anda otomatik değerle çalışmaz buluyorum. Sadece img değerini bir piksel/yüzde veya em genişliğini verebilirsin. Bu işe yarayacak (istediğiniz gibi değil, ama canlandıracak).

Nikita Vasilyev oto değer sorunu için bir js çözümü yapılmış:

bir css tek yol olduğunu düşünüyorum, ama javascript ile değerlerini ayarlamak ve css geçiş kolu sağlayabilirsiniz http://n12v.com/css-transition-to-from-auto/

Answer 3

animasyon.

(işlev başlangıç ​​noktası) Bu setTimeout yerine this gibi bir şey uygulamanız gerekir (resim yüklendiğinde bunu bildiğiniz gibi) ve daha sonra bazı hesaplamaları çalıştırır ve bu verileri img etiketinde depolarsınız.

(işlev geçişi) Ardından, görüntünün boyutlarını yalnızca 'zoom' verilerine göre değiştirirsiniz;

O istenen etkiyi

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