javascript - 替换 img src，缓解高度/宽度差异？

Question

我已经尝试了一些方法，但我不太确定我的问题是代码还是框架竞争。为了披露，我在一个 aspx 站点中，链接的 css，Kentico 10，使用 jquery、jquery ui 和 bootstrap。

我在做什么:通过 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"));
});

Answer 1

要使高度和宽度过渡生效，您需要在 CSS 或样式标签中指定高度和宽度。

看来您正在交换图像 URL 并让图像的原始尺寸(由 placehold.it 的 URL 提供)来设置布局。如果没有动画参数，浏览器会立即重新呈现布局而无需任何过渡。