在页面加载时将图像大小从大调整为小答案

【问题标题】：resizing image from larger to small on page load在页面加载时将图像大小从大调整为小
【发布时间】：2014-05-26 05:35:49
【问题描述】：

我想通过200px 在200px 上短暂加载一张图片，然后在页面加载时平滑缩放到50px。我用显示/隐藏技术完成了它，显示较大>然后隐藏>显示较小的淡入淡出；但我需要过渡。

到目前为止。但是结果很丑 -

var bigSrc = "averycoolimage.jpg";

var img = new Image(),
    oWidth, oHeight;

img.onload = function() {
    oWidth = this.width;
    oHeight = this.height;
    this.width = 100;
    this.height = 50;
    this.id = "bigImg";
}
img.src = bigSrc;

$(function() {
    $("#divId").append(img);

    $("#bigImg").animate({
        height: oHeight,
        width: oWidth,
    }, 500);
});

【问题讨论】：

可能类似于stackoverflow.com/questions/1143517/jquery-resizing-image
这个怎么样：JSFiddle?

标签： javascript jquery css

【解决方案1】：

您也可以使用 CSS3 动画（因此无需 JavaScript）来做到这一点：

img {
     width: 50px;
    -moz-animation: scale 0.5s; /* Firefox */
    -webkit-animation: scale 0.5s; /* Safari and Chrome */
    -o-animation: scale 0.5s; /* Opera */
    animation: scale 0.5s;
}
@keyframes scale {
    from {
        width:200px;
    }
    to {
        width:50px;
    }
}
@-moz-keyframes scale { /* Firefox */
    from {
        width:200px;
    }
    to {
        width:50px;
    }
}
@-webkit-keyframes scale { /* Safari and Chrome */
    from {
        width:200px;
    }
    to {
        width:50px;
    }
}
@-o-keyframes scale { /* Opera */
    from {
        width:200px;
    }
    to {
        width:50px;
    }
}

这里的JSFiddle：http://jsfiddle.net/a4Cm7/1/

【讨论】：

优秀的方法。只是一件事，您缺少img 中没有前缀的animation: scale 0.5s;。
谢谢！我只是注意到在我发布它并准备更改它之后。

【解决方案2】：

使用 CSS3 过渡而不是 CSS3 或 JS 动画对问题的处理略有不同。

HTML

<img src="http://img1.wikia.nocookie.net/__cb20120923041524/kongregate/images/0/03/Awesome_face.png" />

CSS

img {
    -webkit-transition:all .5s;
    transition:all .5s;
    width:200px;
    height:200px;
}
img.small {
    height:50px;
    width:100px;
}

Javascript

$( document ).ready(function() {
    $('img').addClass('small');
});

Fiddle Example

【讨论】：