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

Posted 2023-03-12

【中文标题】在 iPad 和 iPhone 上缩放时背景图像模糊

【英文标题】：Background image blurry when scaling on iPad and iPhone

【发布时间】：2011-08-07 20:53:53

【问题描述】：

我正在创建一个网络应用程序，允许用户缩放某些 100x100 像素的背景图像。

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

过渡完成后，我将 100x100 像素的图像换成更大的 200x200 像素的图像。由于某种原因，图像非常模糊。

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

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

谁能帮帮我？非常感谢。

【问题讨论】：

愚蠢的问题，但你确定会发生与大图的交换吗？

是肯定的，因为我确实在交换发生时看到了变化。但是，仍然非常模糊和不可读。

我创建了一个测试用例（必须在 webkit 浏览器中查看）：webdevout.net/test?01x

图片提供者有问题：link

可能是浏览器的一些“智能”？您的大图像是 400x400，它被 div 中的 200x200 值“缩小”，然后再次放大到 400x400。如果浏览器优化了初始缩小，那么当您再次放大​​时，您的图像会变得模糊。 （不确定我是否完全清楚，但我确实需要咖啡；））

【参考方案1】：

我声称有 3 件事：

缩放 div 会拉伸像素而不是添加更多像素。 背景尺寸：包含；确保您的背景图像完全显示 div 永远不会改变大小。

---

你可以see here div 仍然是 200x200 像素 即使是 400x400 像素，图像也会调整为 200x200 像素。 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"

); $(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);

这么久了，现在的问题是它正在放大并变得模糊，并且在缩放之后它变得超级清晰。

我不知道我们能做些什么，但希望它对你有所帮助！

安德烈亚斯