替换 img src，缓解高度/宽度差异？答案

【问题标题】：Replacing img src, easing on height/width differences?替换 img src，缓解高度/宽度差异？
【发布时间】：2017-07-15 20:46:14
【问题描述】：

我已经尝试了一些方法，但我不太确定我的问题是代码还是框架竞争。为了披露，我在一个 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"));
});

【问题讨论】：

我怀疑您需要在样式标签中明确设置高度和宽度，以便您的过渡产生任何效果。看起来您只是在交换图像并让图像的本机尺寸设置布局。这将导致即时回流，没有过渡。
Hrm，我刚刚检查了 w3schools 编辑器，您确实必须指定图像的高度和宽度。将其发布为您的答案，我会接受。

标签： javascript jquery css asp.net css-transitions

【解决方案1】：

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

您似乎正在交换图像 URL 并让图像的原生尺寸（由 placehold.it 的 URL 提供）来设置布局。如果没有参数进行动画处理，浏览器会立即重新渲染布局而无需任何过渡。

【讨论】：

谢谢。这解决了它。