在iPad和iPhone上縮放時背景圖像模糊

我正在創建一個Web應用程序，允許用戶放大某些100x100px背景圖像。在iPad和iPhone上縮放時背景圖像模糊

當他們雙擊圖像時，我將圖像縮放爲兩倍大小（-webkit-transform：scale（2））。

轉換完成後，我將100x100px圖像換成200x200px的較大圖像。出於某種原因，圖像非常模糊。

所以我試圖用一個img標籤而不是div標籤來顯示我的圖像。這裏的圖像根本不模糊。爲什麼是這樣？

我需要使用背景圖像來規避iPad和iPhone的內存限制（如果我使用img標籤，我會打到內存牆）。

任何人都可以幫助我嗎？非常感謝。

來源

2011-08-07 John Johnson

愚蠢的問題，但你確定與較大的圖像交換髮生？ – Bart

是肯定的，因爲當交換髮生時我確實看到了變化。但是，仍然非常模糊，難以理解。 –

我創建了一個測試用例（必須在webkit瀏覽器中查看）：http://www.webdevout.net/test?01x –

林自稱三兩件事：

縮放一個div拉伸像素，而不是增加更多。
background-size：contains;確保您的背景圖像完全呈現
div永遠不會改變尺寸。

正如你可以see here股利仍是200x200像素
調整圖像的大小爲200x200像素，即使是400x400像素。 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);

並再次將其刪除in 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);

這麼久了，現在的問題是，它的擴大，並得到模糊和規模後，它會超銳。

我們可以做些什麼我不知道，但希望它能幫助你一些地方！

Andreas

來源

2011-08-10 14:51:32 andlrc

在iPad和iPhone上縮放時背景圖像模糊

回答

相關問題