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の幅を与えることができます。それは動作します（あなたが望む通りではありませんが、アニメーション化されます）。

ニキータ・バジライバオート値問題のためのJSソリューションを作った：

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

Answer 3

私はCSSが唯一の方法でないと思うが、あなたはJavaScriptを使用して値を設定し、CSSの遷移ハンドルを聞かせすることができますアニメーション。

（関数init）あなたは（あなたがイメージがロードされたときに知っているので、それだけだ）、代わりにそののsetTimeoutのthisのようなものを実装する必要があり、その後、あなたはいくつかの計算を実行し、imgタグにそのデータを格納します。

（function toggle）次に、「ズーム」データに従って画像のサイズを変更するだけです。

私はそう問題は何

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