当他们双击图像时,我将图像缩放到其大小的两倍(-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);
这么长时间,现在的问题是它正在扩大并变得模糊,并且在规模之后它变得非常尖锐.
我们可以做些什么我不知道,但希望它可以帮助你在哪里！
安德烈亚斯