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

我正在创建一个网络应用程序,我允许用户缩放某些100x100px背景图像.

当他们双击图像时,我将图像缩放到其大小的两倍(-webkit-transform：scale(2)).

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

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

我需要使用背景图像来规避iPad和iPhone上的内存限制(如果我使用img标签,我会打到内存墙).

谁能帮我？非常感谢.

解决方法

我声称有三件事：

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

>因为你可以see here div仍然是200×200像素
>图像大小调整为200×200像素即使它是400×400像素. See here
>几乎在1.中证明了字体仍然很清晰,但javascript认为宽度和高度是200×200像素.

好的,你的修复：

有几种方法.

您可以更改宽度和高度而不是缩放.这不是很漂亮,或者至少你很幸运,如果这个动画不缺乏它的方式扔(在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)","height": "400px"

});
$(本).unbind( “webkittransitionend”);

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

有时浏览器需要一段时间才能确保添加类.因此,您需要在setTimeout(function(){…},0)中包装css的设置;

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

当我们删除课程时：

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

这么长时间,现在的问题是它正在扩大并变得模糊,并且在规模之后它变得非常尖锐.

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

安德烈亚斯