替換img src，緩解高度/寬度差異？

我已經嘗試了一些東西，我不太確定我的問題是代碼或框架競爭。爲了披露，我在一個aspx站點上，使用jquery，jquery ui和bootstrap鏈接css，Kentico 10。替換img src，緩解高度/寬度差異？

我在做什麼：用jquery替換img src。這工作。

目標：並非所有圖像都具有相同的尺寸。我希望圖像的尺寸在舊圖像尺寸和新圖像源尺寸之間進行「動畫處理」。正如你所期望的那樣，它正在閃現新的規模。周圍的佈局對象只是傳送到新的位置。

問題：我已經應用到圖像標籤的轉換似乎沒有做下蹲。

的代碼...注意，使用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")); 
});

來源

2017-02-24 MetalPhoenix

我懷疑你需要明確地設置風格標籤中的高度和寬度，以使你的轉換有效果。它看起來像只是交換圖像，並讓圖像的原始大小設置佈局。這將導致瞬間迴流，無需轉換。 – cloudworks

Hrm，我剛剛檢查了一個w3schools編輯器，並且確實必須指定圖像的高度和寬度。發佈這個答案，我會接受它。 – MetalPhoenix

對於高度和寬度的過渡工作，你需要指定CSS或樣式標籤的高度和寬度。

看來您正在交換圖片網址並讓圖片的原始尺寸（由placehold.it的網址提供）來設置佈局。如果沒有參數設置動畫，瀏覽器會立即重新渲染布局而不進行任何轉換。

來源

2017-03-03 00:46:45 cloudworks

謝謝。這解決了它。 – MetalPhoenix

替換img src，緩解高度/寬度差異？

回答

相關問題