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

Question

我正在创建一个Web应用程序，允许用户缩放某些100x100px背景图像。

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

过渡完成后，我将100x100px的图片换成较大的200x200px的图片。 由于某种原因，图像非常模糊。

因此，我尝试使用img标签而不是div标签显示图像。 这里的图像一点也不模糊。 为什么是这样？

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

谁能帮我？ 非常感谢。

Answer 1

我声称3件事情：

1. 缩放div会拉伸像素，而不增加像素。
2. 背景大小：包含； 确保您的背景图片完全显示
3. div永远不会更改大小。

---

1. 如您所见 ，div仍为200x200像素
2. 图像的大小调整为200x200像素，即使是400x400像素也是如此。 看这里
3. 在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"

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

什么？？！ 它不及时添加/删除课程吗？ 发生什么事。

有时浏览器需要一些时间来确保添加了该类。 因此，您需要将css的设置包装在setTimeout（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);

这么长时间了，现在的问题是它正在放大并变得模糊，并且在缩放后变得非常清晰。

我们不知道该怎么办，但希望它对您有所帮助！

安德烈亚斯