Question

我正在创建一个网络应用，我允许用户缩放某些100x100px的背景图片。

当他们双击图像时，我将图像缩放到其大小的两倍（-webkit-transform：scale（2））。

转换完成后，我将100x100px图像与更大的200x200px图像交换。出于某种原因，图像非常模糊。

所以我尝试使用img标签而不是div标签来显示我的图像。这里的图像根本不模糊。这是为什么？

我需要使用背景图像来规避iPad和iPhone上的内存限制（如果我使用img标签，我会打到内存墙）。

任何人都可以帮助我吗？非常感谢你。

Answer 1

我声称有三件事：

缩放div会拉伸像素而不会添加更多像素。
background-size：contains;确保您的背景图像完全显示
div永远不会改变大小。

尽可能see here div仍为200x200像素
图像大小调整为200x200像素即使它是400x400像素。 See here
几乎在1.中证明了字体仍然很清晰，但javascript认为宽度和高度是200x200像素。

好的，你的修复：

有几种方法。

您可以更改宽度和高度而不是缩放。这不是很漂亮，或者至少你很幸运，如果这个动画不缺乏它的方式（在iOS上）。

其他可能是缩放和检测webkitTranstionEnd

$('div').bind("webkitTransitionEnd", function() {
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
});

请记住取消绑定webkitTransitionEnd事件。否则它会使函数调用倍增。

但是发生了什么动画回来了。因此，我们必须将转换保留在一个类中，以便我们可以在需要时添加和删除它：

div {
   -moz-transition-duration: 0ms;
}
div.transition {
    -moz-transition-duration: 200ms;
}

然后在我们必须动画时添加该类：

setTimeout(function() {
    $('div').addClass("transition");
    $('div').css({
        backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
        webkitTransform: 'scale( 2 )',
        mozTransform: 'scale( 2 )'
    });
}, 3000);

然后在webkitTransitionEnd

$(this).removeClass('transition');
$(this).css({
   "-webkit-transform": "scale(1)",
   "width": "400px",
   "height": "400px"

}）; $（本）.unbind（ “webkitTransitionEnd”）;

什么??！它不能及时添加/删除课程？！会发生什么。

有时浏览器需要一段时间来确保添加类。因此，您需要在setTimeout中包装css的设置（function（）{...}，0）;

setTimeout(function() {
    $('div').addClass("transition");
    setTimeout(function(){
        $('div').css({
            backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
            webkitTransform: 'scale( 2 )',
            mozTransform: 'scale( 2 )'
        });
    }, 0);
}, 3000);

当我们删除课程时：

$(this).removeClass('transition');
setTimeout(function(){
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
}, 0);

很长一段时间，现在的问题是它正在扩大并变得模糊，并且在规模之后变得非常尖锐。

我们可以做些什么我不知道，但希望它可以帮助你在哪里！

安德烈亚斯

在iPad和iPhone上缩放时背景图像模糊

1 个答案: