img srcを置き換えると、高さ/幅の違いが緩和されますか？

Question

私はいくつかのことを試しましたが、私の問題がコードまたはフレームワークと競合しているかどうかはよくわかりません。開示のために、私はaspxサイト、リンクされたCSS、Kentico 10、jquery、jquery UI、およびブートストラップを使用しています。

私がやっていること：img srcをjqueryで置き換えています。これは機能します。

目的：すべての画像が同じ寸法を持つわけではありません。私は、古い画像と新しい画像の画像のサイズとの間で、画像の寸法を「アニメート」する必要があります。あなたが期待しているように、それがやっていることはちょうど新しいサイズに点滅しています。周囲のレイアウトオブジェクトは新しい場所に移動するだけです。

問題：私がイメージタグに適用した移行は、スクワットをしていないようです。

コード... CSSクラスproductImageとイメージタグがリピータ内にあることに注意してください：

CSS：

.mainImage { 
    max-width: 551px; 
    cursor: pointer; 
    -webkit-transition: all .6s ease-in-out !important; 
    -moz-transition: all .6s ease-in-out !important; 
    -o-transition: all .6s ease-in-out !important; 
    -ms-transition: all .6s ease-in-out !important; 
    transition: all .6s ease-in-out !important; 
} 

をHTML：

これは、メイン画像ですimg srcを変更するターゲット。

<div class="col-md-6"> 
    <asp:Image ImageUrl="http://placehold.it/551x373" runat="server" ID="imgProduct" AlternateText="Product Image" ToolTip="Product Image" CssClass="mainImage" /> 
</div> 

...

これはそれがjavsacriptのsrc交換を発射し、リピーターの内部にあるにクリックした画像のサムネイルです。 data-target属性はサーバー側に設定されており、メイン画像を変更するsrc urlのURLのみが含まれていることに注意してください。

<div class="col-sm-1"> 
    <asp:Image ImageUrl="http://placehold.it/64x64" runat="server" ID="img1" AlternateText="Product Image" ToolTip="Product Image" CssClass="productImage" onclick="ShowImage(this);" /> 
</div> 

のJavaScript：高さと動作するように幅の移行については

function ShowImage(ctl) { //this is already a jquery item... 
    var targetImage = $("#<%= imgProduct.ClientID %>");  
    targetImage.attr("src", $(ctl).attr("data-target")); 
} 

$(document).ready(function() { 
    ShowImage($("[id$='img1']:first")); 
}); 

Answer 1

、あなたはCSSやスタイルタグ内の高さと幅を指定する必要があります。

画像のURLを入れ替えると、画像のネイティブサイズ（placehold.itのURLで提供される）にレイアウトを設定するように見えます。アニメートするパラメータがなければ、ブラウザはトランジションなしで即座にレイアウトを再描画します。