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

概述我正在创建一个网络应用程序,我允许用户缩放某些100x100px背景图像. 当他们双击图像时,我将图像缩放到其大小的两倍(-webkit-transform：scale(2)). 转换完成后,我将100x100px图像与更大的200x200px图像交换.出于某种原因,图像非常模糊. 所以我尝试使用img标签而不是div标签来显示我的图像.这里的图像根本不模糊.为什么是这样？ 我需要使用背景图像来规 我正在创建一个网络应用程序,我允许用户缩放某些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);

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

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

安德烈亚斯

总结

以上是内存溢出为你收集整理的html – 在iPad和iPhone上缩放时背景图像模糊全部内容，希望文章能够帮你解决html – 在iPad和iPhone上缩放时背景图像模糊所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。